将对象数组绑定到带有预选值的angular中的复选框的最佳方法

时间:2015-12-08 09:09:49

标签: javascript angularjs

我有复选框列表。我已经在线阅读了很多解决方案,但是如何正确处理这个问题并不清楚。我已经实现了一种方法,但它有多个问题。一个预选值未显示,函数isSelected被多次调用。

HTML -

<div class="checkbox" ng-repeat="service in EditController.services">
    <label>
        <input type="checkbox" name="{{service.serviceId}}" ng-model="selection" 
            ng-checked="EditController.isSelected(service.serviceId)" 
            ng-change="onSelection(selection, service)"/>
        <span class="label">{{service.serviceValue}}</span>
    </label>
</div>

JS -

 onSelection(selection, service){
   var EditController = this;
   if(!EditController.selectedServices){
     EditController.selectedServices = [];
   }
   if(selection){
     EditController.selectedServices.push(service);
   }
 }

 isSelected(serviceId){
   var EditController = this;
   angular.forEach(EditController.editForm.services, function(value, index){
     if(value.serviceId === serviceId){
       return true;
     }
   });
   return false;
 }

 JSON : 

 editForm : 
{

  "services": [
    {
      "serviceId": "ESSL China",
      "serviceValue": "ESSL China"
    }
}

服务:

{
  "serviceId": "ESSL China",
  "serviceValue": "ESSL China"
},
{
  "serviceId": "service1",
  "serviceValue": "service1"
}

这看起来并不好。什么是在angularjs世界中处理这种情况的最佳方式。

0 个答案:

没有答案