2014-09-24 125 views
1

这里获得选择的项目清单,我使用angular.js示人名单如何angular.js

<div class="recipient" ng-repeat="person in people"> 
      <img src="{{person.img}}" /> person.name 
      <div class="email">person.email</div> 
    </div> 

$scope.people = [{id:1}, {id:2}, {id:3}, {id:4}]; 

看起来就像下面 enter image description here

我想要做什么是我可以选择多个项目,并通过单击确定按钮,我可以得到选定项目的列表。所以如果我选择ID 1和ID 2,然后我想返回[{ID:1},{ID:2}]列表

我怎么能实现它在angular.js

+0

请在这里填写更多的单词'我可以得到选择的项目列表' – swapnesh 2014-09-24 18:21:04

回答

1

好我想如果你使用ng-repeat来循环播放一组人,你可以在每个项目上添加ng-click指令来切换你的对象的属性,比如选择

然后在你的OK按钮点击,就可以过滤所有具有选择属性设置为true的人。

下面是执行的代码片段:

<div class="recipient" ng-repeat="person in people" ng-click="selectPeople(person)"> 
    <img src="{{person.img}}" /> person.name 
    <div class="email">person.email</div> 
</div> 

<button ng-click="result()">OK</button> 
             
  
function demo($scope) { 
 

 
    $scope.ui = {}; 
 

 
    $scope.people = [{ 
 
    name: 'Janis', 
 
    selected: false 
 
    }, { 
 
    name: 'Danyl', 
 
    selected: false 
 
    }, { 
 
    name: 'tymeJV', 
 
    selected: false 
 
    }]; 
 

 
    $scope.selectPeople = function(people) { 
 
    people.selected = !people.selected; 
 
    }; 
 

 
    $scope.result = function() { 
 
    $scope.ui.result = []; 
 
    angular.forEach($scope.people, function(value) { 
 
     if (value.selected) { 
 
     $scope.ui.result.push(value); 
 
     } 
 
    }); 
 
    }; 
 

 
}
.recipient { 
 
    cursor: pointer; 
 
} 
 

 
.select { 
 
    color:green; 
 
} 
 

 
.recipient:hover { 
 
    background-color:blue; 
 
}
<script src="https://code.angularjs.org/1.2.25/angular.js"></script> 
 
<div ng-app ng-controller="demo"> 
 

 
    <div class="recipient" ng-repeat="person in people" ng-click="selectPeople(person)" ng-class="{ select: person.selected }"> 
 
    <div class="name">{{ person.name }}</div> 
 
    </div> 
 

 
    <button ng-click="result()">OK</button> 
 

 
    Result : 
 
    <ul> 
 
    <li ng-repeat="item in ui.result">{{ item.name }}</li> 
 
    </ul> 
 

 
</div>
0

如果你只是想显示勾选或者你可以只应用一个过滤器,但你需要从undefined过滤值切换至true如果你不想被卡住不能再显示所有。

HTML:

<button ng-click="filterChecked()">Filter checked: {{ checked }}</button> 
<div class="recipient" ng-repeat="person in people | filter:checked"> 
    <input type='checkbox' ng-model="person.isChecked" /> 
    <img ng-src="{{person.img}}" />{{ person.name }} 
    <div class="email">{{ person.email }}</div> 
</div> 

控制器:

// Apply a filter that shows either checked or all 
$scope.filterChecked = function() { 
    // if set to true or false it will show checked or not checked 
    // you would need a reset filter button or something to get all again 
    $scope.checked = ($scope.checked) ? undefined : true; 
} 

如果你想获得已检查了所有和提交的表单数据你可以简单地通过数组循环:

控制器:

// Get a list of who is checked or not 
$scope.getChecked = function() { 
    var peopleChkd = []; 
    for (var i = 0, l = $scope.people.length; i < l; i++) { 
     if ($scope.people[i].isChecked) { 
      peopleChkd.push(angular.copy($scope.people[i])); 
      // Remove the 'isChecked' so we don't have any DB conflicts 
      delete peopleChkd[i].isChecked; 
     } 
    } 
    // Do whatever with those checked 
    // while leaving the initial array alone 
    console.log('peopleChkd', peopleChkd); 
}; 

Check out my fiddle here

注意person.isChecked在HTML仅加入。