来自逗号分隔值的 ng-if 或 ng-checked 匹配
Posted
技术标签:
【中文标题】来自逗号分隔值的 ng-if 或 ng-checked 匹配【英文标题】：ng-if or ng-checked matching from comma separated value 【发布时间】：2015-08-23 18:50:24 【问题描述】：我有以下 html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngModel-getter-setter-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="getterSetterExample">
<div ng-controller="ExampleController">
<form name="userForm">
<label ng-repeat="id in ids">
<input type="checkbox"
value="id.id"
ng-checked="id.id == csv"> id.id
</label>
</form>
</div>
</body>
</html>
控制器是
(function(angular)
'use strict';
angular.module('getterSetterExample', []).controller('ExampleController', ['$scope', function($scope)
$scope.csv = '5,6,76,78';
$scope.ids = [
id:5,
id:64,
id:456,
id:47,
id:767,
id:78,
id:55,
id:98
];
]);
)(window.angular);
我希望在 csv 中找到 id 时选中该复选框。例如 id 5 和 78 在 csv 中，所以最初应该选中这两个值复选框
这里是http://plnkr.co/edit/XoW4hARWlzN5iTMuCJW1
【问题讨论】：
【参考方案1】：您可以将 csv 更改为数字数组：
$scope.csv = [5,6,76,78];
//If you REALLY need it as a string
$scope.csv = '5,6,76,78'.split(',').map(Number);
然后查看html中id的索引
<label ng-repeat="id in ids">
<input type="checkbox"
value="id.id"
ng-checked="csv.indexOf(id.id) != -1"> id.id
</label>
【讨论】：
我领先你 23 秒 :p【参考方案2】：您需要在ng-checked 表达式中使用.indexOf 和!=。
标记
<label ng-repeat="id in ids">
<input type="checkbox"
value="id.id"
ng-checked="csv.indexOf(id.id) != -1"> id.id
</label>
代码
$scope.csv = '5,6,76,78'.split(',');
Demo Plunkr
【讨论】：
说实话，如果 csv 是 '55,76,78'，你的方法会给出错误的结果，它会检查 id: 5, 6, 7, 8, 55, 76 的复选框， 78:p 所以你可以分割你的字符串并得到一个合适的数组:) @Chichozell 谢谢我会相应地更新我的解决方案 另外，使用类型检查比较 !== 也是错误的，除非您将值转换为数字 @Chichozell 是的..我意识到..我更新了解决方案..谢谢【参考方案3】：需要将csv字符串转为数组，
(function(angular)
'use strict';
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', function($scope)
$scope.csv = '5,6,76,78';
$scope.csv1 = $scope.csv.split(',');
console.log($scope.csv1);
$scope.ids = [
id:5,
id:64,
id:456,
id:47,
id:767,
id:78,
id:55,
id:98
];
$scope.isInArray = function(value)
return $scope.csv1.indexOf(value.toString()) > -1;
]);
)(window.angular);
http://plnkr.co/edit/YGkCKZoo3JlB7iGQRDPn?p=preview
【讨论】：
这和其他两个答案几乎一样，只是说:)以上是关于来自逗号分隔值的 ng-if 或 ng-checked 匹配的主要内容，如果未能解决你的问题，请参考以下文章
sql SQL - 在以逗号，管道或分号或任何其他字符分隔的列中获取多个值或连接值的值