色を変更データは表

で見つかった場合、私は、私はテキストボックスを持っているWebアプリ作成しています：色を変更データは表

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

を...とangularjsコントローラで私のWebサービスからデータをフェッチしているテーブル：

<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：

まずあなたが

.change-color { 
    color: yellow; 
}

、あなたが変更する必要がある色でCSSクラスを必要とする次に次に宣言し、検索<input>に

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

をng-modelを追加あなたのコントローラの新しい機能：

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

    return false; 
}

次にあなたがng-classは角式を解決するとして、あなたは直接ng-classプロパティにロジックを記述することができますng-class

を使用することができます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

を追加します。機能の必要はありません。

ここで必要な解決策は、テキストフィールドで結びつき、色の変化を確認することです。

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>

列の値をチェックするために `NG-class`と正規表現パターンを使用

Here is a working Demo

出典

2016-11-30 07:16:50 Sravan

答えて

関連する問題