改變顏色，如果在表

我創建一個web應用程序中的數據中，我有一個文本框：改變顏色，如果在表

<input type="text" style="height:30px; width:240px;" placeholder="Enter Data" />

...以及從我的web服務在angularjs控制器讀取數據的表：

<table id="table" class="table table-bordered font" style="width:100%; margin-top:30px; background-color:white; padding-top:10px;"> 
      <tr class="bg-primary textalign"> 
       <th>Employee Name</th> 
       <th>From</th> 
       <th>To</th> 
       <th>Month</th> 
       <th>Year</th> 
       <th>Reason</th> 
       <th>Leave Id</th> 
      </tr> 
      <tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;"> 
       <td style="border: 2px solid #F3F3F3;">{{x.empname}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.from}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.to}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.month}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.year}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.reason}}</td> 
       <td style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td> 
      </tr> 
     </table>

這是我的數據是如何顯示在我的表：

Employee Name From To Month Year Reason Leave Id 
Alpesh Renuse 26-02-2016 27-02-2016 2 2016 Personal 353 
Alpesh Renuse 09-05-2016 28-05-2016 5 2016 Personal 402 
Alpesh Renuse 07-09-2016 10-09-2016 9 2016 Personal 441

如果用戶連接或者26或2016或者表中的任何東西，則必須改變特定<td>的顏色。

來源

2016-11-30 Mumbai Wadala

使用'NG-class'和正則表達式來檢查列的值！ –

使用ng-class：

首先，你需要在你需要改變顏色的CSS類，

.change-color { 
    color: yellow; 
}

然後在搜索<input>添加ng-model，

<input ng-model="searchWith" type="text" style="height:30px; width:240px;" placeholder="Enter Data" />

然後聲明控制器中的新功能：

$scope.search = function (feildValue, searchWith) { 
    if (searchWith) { 
     return (feildValue.indexOf(searchWith) !== -1); 
    } 

    return false; 
}

然後加入ng-class="{'change-color': search(x.<whatever>, searchWith)}"，

<tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;"> 
     <td ng-class="{'change-color': search(x.empname, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.empname}}</td> 
     <td ng-class="{'change-color': search(x.from, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.from}}</td> 
     <td ng-class="{'change-color': search(x.to, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.to}}</td> 
     <td ng-class="{'change-color': search(x.month, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.month}}</td> 
     <td ng-class="{'change-color': search(x.year, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.year}}</td> 
     <td ng-class="{'change-color': search(x.reason, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.reason}}</td> 
     <td ng-class="{'change-color': search(x.leaveid, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td> 
    </tr>

來源

2016-11-30 06:50:30

您可以使用ng-class

爲，ng-class角度解析表達式，你可以直接寫的邏輯ng-class財產。甚至不需要功能。

這是您需要的解決方案，開始在文本字段中綁定並檢查顏色變化。

Type: 2016, Compensate, Personal, 2015, Alpesh Renuse etc

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.sonvintable = [ 
 
    { 
 
     'empname': 'Alpesh Renuse', 
 
     'from': '26-02-2016', 
 
     'to': '27-02-2016', 
 
     'month': '2', 
 
     'year': '2016', 
 
     'reason': 'Personal', 
 
     'leaveid': '402', 
 
    },{ 
 
     'empname': 'Alpesh Renuse', 
 
     'from': '11-11-2011', 
 
     'to': '15-15-2015', 
 
     'month': '5', 
 
     'year': '2011', 
 
     'reason': 'Compensate', 
 
     'leaveid': '403', 
 
    }, 
 
    { 
 
     'empname': 'Alpesh Renuse', 
 
     'from': '12-12-2012', 
 
     'to': '17-12-2012', 
 
     'month': '6', 
 
     'year': '2012', 
 
     'reason': 'Official', 
 
     'leaveid': '404', 
 
    } 
 
    ]; 
 
    
 
    
 
});

.change-color 
 
{ 
 
color:blue; 
 
background: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 

 
<input ng-model="searchWith" type="text" style="height:30px; width:240px;" placeholder="Enter Data" /> 
 

 
    <table id="table" class="table table-bordered font" style="width:100%; margin-top:30px; background-color:white; padding-top:10px;"> 
 
      <tr class="bg-primary textalign"> 
 
       <th>Employee Name</th> 
 
       <th>From</th> 
 
       <th>To</th> 
 
       <th>Month</th> 
 
       <th>Year</th> 
 
       <th>Reason</th> 
 
       <th>Leave Id</th> 
 
      </tr> 
 
      <tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;"> 
 
     <td ng-class="{'change-color': (searchWith && x.empname.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.empname}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.from.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.from}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.to.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.to}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.month.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.month}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.year.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.year}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.reason.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.reason}}</td> 
 
     <td ng-class="{'change-color': (searchWith && x.leaveid.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td> 
 
    </tr> 
 
     </table> 
 

 
</div> 
 

 

 
</body> 
 
</html>

請運行上面的代碼中

Here is a working Demo

來源

2016-11-30 07:16:50 Sravan

改變顏色，如果在表

回答

相關問題