Question

我想突出显示一行，其中包含数据来自后端的行的详细信息。我有一个名称地址和链接的表。一旦我点击该链接的链接详细信息显示。每个链接都不包含数据。所以我想只突出显示包含数据的行。这是我的代码： service.js：

(function(){
    angular.module('myApp').service('detailService',detailService);
    function detailService($http,$q){
        var user={},
        baseUrl="http://localhost:3000/form/detail";
        var deferred =$q.defer();
        this.getAllUSer = function(){
            console.log('in getAllUser');
            return $http.get(baseUrl).then(function(response){
                user=response.data;
                deferred.resolve(user);
                return deferred.promise
            },function(error){
                deferred.reject(error);
                return deferred.promise
            });
        },
            this.getNameDetail=function(comp_id){
                console.log('inside Record');
                return $http.get(baseUrl + '/record/' + comp_id)
                    .success(function(response){
                        deferred.resolve(response.data);
                        return deferred.promise;
                    },function(error){
                        deferred.reject(error);
                        return deferred.promise;
                    });
            },
            this.getRecordDetail=function(comp_id){
                console.log('inside Record');
                return $http.get(baseUrl + '/' + comp_id)
                    .success(function(response){
                        deferred.resolve(response.data);
                        return deferred.promise;
                    },function(error){
                        deferred.reject(error);
                        return deferred.promise;
                    });
            }
    }
})();

controller.js：

(function(){
    angular.module('myApp').controller('detailCtrl',detailCtrl);
    function detailCtrl($scope,detailService,$stateParams,$state){
        var userId=$stateParams.userId;
            $scope.user=null;
            $scope.cur_record=null;
           $scope.name=null;

        $scope.getUser =function(){
            console.log('inside controller');
            detailService.getAllUSer().then(function(response){
                $scope.user=response;
                console.log($scope.user);
            });
        },
            $scope.getName =function(comp_id){
                console.log('inside record controller');
                detailService.getNameDetail(comp_id).then(function(data){
                    $scope.name=data.data;
                    console.log($scope.name);
                    $state.go('detail', {'userId':comp_id});
                });
            },
            $scope.getRecord =function(comp_id){
                console.log('inside record controller');
                detailService.getRecordDetail(comp_id).then(function(data){
                    $scope.cur_record=data.data;
                    console.log($scope.cur_record);
                    $state.go('detail', {'userId':comp_id});
                });
            },
               $scope.getRecordName=function(){
                  $scope.getRecord(userId);
               },
                 $scope.get=function(){
                    $scope.getName(userId);
                }
    }
})();

模板：

<div class="row-fluid">
    <div class="col-md-10">
        <table class="table table-bordered main" ng-init="getUser()">
            <thead>
              <tr>
                  <th>sr_no</th>
                  <th>comp_id</th>
                  <th>name</th>
                  <th>view</th>
              </tr>
            </thead>
            <tbody >
            <tr ng-repeat="x in user">
                <td>{{$index+1}}</td>
                <td>{{x.comp_id}}</td>
                <td>{{x.name}}</td>
              <td ng-click="getRecord(x.comp_id)"><a href="">view</a></td>
            </tr>
            </tbody>
        </table>
    </div>
        <div ui-view></div>
    </div>

Answer 1

如果x.comp_id具有值

，则可以按ng-style高亮显示行

    <tr ng-repeat="x in user" ng-style="x.comp_id&&{'color':'red'}">
        <td>{{$index+1}}</td>
        <td>{{x.comp_id}}</td>
        <td>{{x.name}}</td>
      <td ng-click="getRecord(x.comp_id)"><a href="">view</a></td>
    </tr>

参见示例fiddle

如何突出显示包含angularjs中该行详细信息的特定行

1 个答案: