Question

我正在创建一个我有文本框的网络应用程序：

<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>的颜色。

Answer 1

使用ng-class：

首先，您需要一个具有您需要更改的颜色的CSS类，

.change-color {
    color: yellow;
}

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

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

Answer 2

您可以使用ng-class

由于ng-class解析角度表达式，您可以直接在ng-class属性中写入逻辑。甚至不需要功能。

这是您需要的解决方案，开始在文本字段中绑定并检查颜色更改。

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

＆＃13;

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',
    }
    ];
    
   
});

＆＃13;

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

＆＃13;

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

＆＃13;

请在代码段上方运行

Here is a working Demo

更改表中找到的if数据的颜色

2 个答案: