如何检查角度中数组ID中已存在的复选框:

时间:2014-12-05 12:47:46

标签: angularjs checkbox

我有一个简单的对象数组:

pickedFeeds = [
  {
    "id": "1",
    "name": "ALLEN Production Lake",
    "status": "IN_PROGRESS",
    "owner": "ih546q"
  },
  {
    "id": "2",
    "name": "Demo Lake",
    "status": "IN_PROGRESS",
    "owner": "ih546q"
  }
]

然后我有一个像这样的“提要”列表:

feeds:[{
                id:1,
                name:'ALLEN Production Lake'
            },{
                id:2,
                name:'Demo Lake'
            },
            {
                id:3,
                name:'mamalake'
            },
            {
                id:4,
                name:'tatalake'
            },
            {
                id:5,
                name:'mapalake'
            },
            {
                id:6,
                name:'gagalake'
            },
            {
                id:7,
                name:'ramalake'
            },
            {
                id:8,
                name:'chakalake'
            },
            {
                id:9,
                name:'dumdumlake'
            },
            {
                id:10,
                name:'popolake'
            }]
        };

在最后一个列表上我有一个复选框:

<div ng-repeat='feed in feeds'>
    <input  type="checkbox" id='{{feed.id}}'/>
                          <label for='{{feeds.id}}' class='lake-name'>{{feed.name}}<span class='checkbox-input-style'></span></label>

我想做以下事情:

我想检查[V]那些已经在pickfeeds数组中的人,  当我取消选中我要删除,如果存在于selectedFeeds列表等等..  我该怎么办?我的ng模型应该是什么?

1 个答案:

答案 0 :(得分:1)

您可以创建函数来检查selectedFeeds中是否存在与feed.id具有相同ID的元素,即:

$scope.test = function(feed){    
   if(filterFilter($scope.pickedFeeds,{id:feed.id} ).length >0)
     {       
       return true;       
     }    
  }

然后您可以添加到您的视图中:

<input  type="checkbox" id='{{feed.id}}' ng-model="feed.checked" ng-checked="test(feed)" />

请不要忘记将filterFilter的依赖项添加到您的控制器。

请参阅下面的演示:


var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, filterFilter) {

  $scope.test = function(feed) {

    if (filterFilter($scope.pickedFeeds, {
      id: feed.id
    }).length > 0) {

      return true;

    }

  }

  $scope.pickedFeeds = [{
    "id": "1",
    "name": "ALLEN Production Lake",
    "status": "IN_PROGRESS",
    "owner": "ih546q"
  }, {
    "id": "2",
    "name": "Demo Lake",
    "status": "IN_PROGRESS",
    "owner": "ih546q"
  }]



  $scope.feeds = [{
    id: 1,
    name: 'ALLEN Production Lake'
  }, {
    id: 2,
    name: 'Demo Lake'
  }, {
    id: 3,
    name: 'mamalake'
  }, {
    id: 4,
    name: 'tatalake'
  }, {
    id: 5,
    name: 'mapalake'
  }, {
    id: 6,
    name: 'gagalake'
  }, {
    id: 7,
    name: 'ramalake'
  }, {
    id: 8,
    name: 'chakalake'
  }, {
    id: 9,
    name: 'dumdumlake'
  }, {
    id: 10,
    name: 'popolake'
  }]


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">

    <div ng-repeat='feed in feeds'>
      <input type="checkbox" id='{{feed.id}}' ng-model="feed.checked" ng-checked="test(feed)" />
      <label for='{{feeds.id}}' class='lake-name'>{{feed.name}}<span class='checkbox-input-style'></span>
      </label>
    </div>
  </div>