Question

我有以下控制器

.controller('retrieveSummaryData', [ '$scope', '$http', '$log', function ($scope, $http, $log) {
    $scope.url = 'data/sub1_example.json';
    $scope.search = function(){
        angular.element('body').addClass('loading');
        $scope.total = 0; // reset the scope total 
        $http.get($scope.url) // get json data
        .success(function(data, status, headers, config) {
            $scope.dataList = data;
            angular.element('.downloadFile').removeClass('disabled');
            angular.element('.colHeader').removeClass('hidden');
            angular.element('body').removeClass('loading');
            console.log(data);
        }).error(function(error, status, headers, config) {
            console.log(status);
        });
    }

}])

在我的模板中，我有以下内容：

<li ng-repeat="data in dataList" class="outputData">
    <ul class="clearfix">
         ....
         <li class="col-md-1 sign">{{data.signage}}</li>
         <li class="col-md-1 sign" ng-class="{valid: data.signage == '+-' || data.balance > 0 && data.signage == '+', invalid: data.balance < 0 && data.signage == '+' // etc}"></li>
    </ul>
</li>

我想将此表达式移动到我的控制器。但是我的json是一个对象数组。

如何迭代这些。在vanilla js中我会写一个循环，但我认为angular有一些内置函数来做这个？

以下是我的尝试：

$scope.dataList = data;
$scope.signage = $scope.dataList.signage // undefined
$scope.returnClass(function(){
   return {
     valid: $scope.signage == '+' || $scope.signage == '+-',
     invalid: $scope.signage == '-' // etc
   }
}

如果我$scope.dataList[0].signage，我会得到数组中的第一项。我需要在这里写一个循环吗？

我的json部分示例

[
  {
     "entity":"C-2919",
     "entity_desc":"A & L CF June (3) Limited",
     "account":"S1710008",
     "account":"9706250",
     "account_desc":"CT asset CY tfr group relief",
     "l700_code":"R001000",
     "l700_acc_desc":"S1710008 Corporation tax current yr - group relief settlemen",
     "signage":"-",
     "balance":0.00
  },
  {
     "entity":"C-2919",
     "entity_desc":"A & L CF June (3) Limited",
     "account":"S1710010",
     "walker_account":"9706204",
     "walker_account_desc":"CORP TAX PY - B/F",
     "l700_code":"R001004",
     "l700_acc_desc":"S1710010 Corporation tax prior year - b/f",
     "signage":"+",
     "balance":376949.00
  }, // etc

Answer 1

在您的控制器中

添加方法

$scope.getClass = function(item) {
   var clss;

   // You can put your expression in this function
   // data.signage == '+-' || data.balance > 0 && data.signage == '+', invalid: data.balance < 0 && data.signage == '+' 


   if(item.signage == '+' || item.signage == '+-') {
           clss = 'valid';
   } else if(item.signage == '-') {
           clss = 'invalid';
   }

   return clss;
}

在你的HTML中

   <li ng-repeat="data in dataList" class="outputData">
      <ul class="clearfix">
          ....
          <li class="col-md-1 sign">{{data.signage}}</li>
          <li class="col-md-1 sign" class="{{getClass(data)}}"></li>
      </ul>
   </li>

您将根据表达式获得适当的类。

Answer 2

您可以添加函数以返回布尔值

$scope.validQuery = function (data) {
  return (data.signage === '+-' || data.balance > 0 && data.signage ==   '+');
}
 $scope.invalidQuery = function (data) {
   return (data.signage === '-' && data.balance < 0);
}

ng-class可写

ng-class="{valid: validQuery(data), invalid: invalidQuery(data)}"

Answer 3

您可以创建两个方法并将instList.Add(new Instructor { firstName = txtInstructorFirstName.Text, lastName = txtInstructorLastName.Text }); lvInstructorList.Clear(); foreach (var inst in instList) { lvInstructorList.Items.Add(inst); }作为参数传递。

data

在控制器上

<li class="col-md-1 sign" ng-class="{valid: IsValid(data), invalid: IsInvalid(data) // etc}"></li>

将表达式从模板移动到控制器

3 个答案: