Question

我正在使用angular 1.6.x

我有一个复选框列表，它使用变量（selectedJobIds）维护其状态。该变量包含选定的作业ID，例如

$scope.selectedJobIds = {
 23: true,
 56: true,
 47: false
}

现在，我需要检查此对象中存在的复选框，并使值为true。此外，即使它们不存在于对象中，也应检查复选框。

目前，它无法区分不存在的id和id与false值。它取消了两者。

尝试方法： 1）我试图实现三元条件 ng-model="(angular.isDefined(selectedJobIds[job.iid])?selectedJobIds[job.iid]:true)"

但它会引发语法错误。

2）我尝试使用ng-model-options的getter / setter 但问题是我无法将作业ID传递给getter函数。此外，我无法获得当前元素的范围，因此我可以访问其值。所以，我可以使用这个id来检测它在selectedJobIds变量中的存在和不存在。

HTML：

<ul class="list-unstyled filtered-trucks-ul">
  <li ng-repeat="job in dType track by $index" style="vertical-align: middle;">
      <input type="checkbox" name="job_id" value="{{job.iid}}"
             ng-click="selectFilterJob()"
             ng-model="selectedJobIds[job.iid]" />
      <img src="23.png">
      {{ job.rref + ' (' +job.iid+ ')' | uppercase }}
      </li>
</ul>

JS：

$scope.checkedFilteredJobs = {
    getterFunc: function(newName) {
        console.log(newName)
        // if(angular.isDefined($scope.selectedJobIds[id]))
        // {
        //    return $scope.selectedJobIds[id];
        // }
        // else {
        return true;
        // }
    }
};

Answer 1

使用ng-init初始化缺失的属性：

var app = angular.module('myApp', []);

app.controller('myAppController', ['$scope', function($scope) {

  $scope.dType = [{iid: 23}, {iid: 56}, {iid: 47}, {iid: 1234}, {iid: 888}];
  $scope.selectedJobs = {
    23: true,
    56: true,
    47: false
  };

  $scope.initMissing = function(job) {
    if (!$scope.selectedJobs.hasOwnProperty(job.iid))
      $scope.selectedJobs[job.iid] = true
  }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div ng-app="myApp" ng-controller="myAppController">
  <ul>
    <li ng-repeat="job in dType track by $index">
      <input type="checkbox" ng-init="initMissing(job)" name="job_id"
             ng-model="selectedJobs[job.iid]" />
    </li>
  </ul>
</div>

在Angular js Getters

1 个答案: