栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用AngularJS绑定到复选框值列表?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用AngularJS绑定到复选框值列表?

有两种方法可以解决此问题。使用简单数组或对象数组。每个解决方案都有其优缺点。您会在下面找到每种情况的一种。


用简单的数组作为输入数据

HTML可能如下所示:

<label ng-repeat="fruitName in fruits">  <input    type="checkbox"    name="selectedFruits[]"    value="{{fruitName}}"    ng-checked="selection.indexOf(fruitName) > -1"    ng-click="toggleSelection(fruitName)"  > {{fruitName}}</label>

适当的控制器代码为:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {  // Fruits  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];  // Selected fruits  $scope.selection = ['apple', 'pear'];  // Toggle selection for a given fruit by name  $scope.toggleSelection = function toggleSelection(fruitName) {    var idx = $scope.selection.indexOf(fruitName);    // Is currently selected    if (idx > -1) {      $scope.selection.splice(idx, 1);    }    // Is newly selected    else {      $scope.selection.push(fruitName);    }  };}]);

优点 :简单的数据结构和按名称切换很容易处理

缺点 :添加/删除很麻烦,因为必须管理两个列表(输入和选择)


使用对象数组作为输入数据

HTML可能如下所示:

<label ng-repeat="fruit in fruits">  <!--    - Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted      traditionally    - Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression      (no two-way-data-binding)    - Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`      is arbitrary. The property name could be anything and will be created on the object if not present.  -->  <input    type="checkbox"    name="selectedFruits[]"    value="{{fruit.name}}"    ng-model="fruit.selected"  > {{fruit.name}}</label>

适当的控制器代码为:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {  // Fruits  $scope.fruits = [    { name: 'apple',    selected: true },    { name: 'orange',   selected: false },    { name: 'pear',     selected: true },    { name: 'naartjie', selected: false }  ];  // Selected fruits  $scope.selection = [];  // Helper method to get selected fruits  $scope.selectedFruits = function selectedFruits() {    return filterFilter($scope.fruits, { selected: true });  };  // Watch fruits for changes  $scope.$watch('fruits|filter:{selected:true}', function (nv) {    $scope.selection = nv.map(function (fruit) {      return fruit.name;    });  }, true);}]);

优点 :添加/删除非常容易

缺点 :更复杂的数据结构和按名称切换很麻烦或需要帮助方法


演示 :http :
//jsbin.com/ImAqUC/1/



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/426946.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号