我正在使用angular 1.6.x
我有一个复选框列表,这些复选框使用变量(selectedJobIds)维护其状态。该变量包含选定的工作ID,例如,
$scope.selectedJobIds = {
23: true,
56: true,
47: false
}
现在,我需要检查存在于该对象中且值为true的复选框。另外,即使对象中不存在复选框,也应选中该复选框。
目前,它无法区分不存在的id和具有假值的id。它取消选中它们两者。
尝试的方法:
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;
// }
}
};
最佳答案
使用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>