来自逗号分隔值的 ng-if 或 ng-checked 匹配

Question

我关注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

Answer 1

您需要在 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

Answer 2

您可以将 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>

Answer 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 匹配

ng-if or ng-checked matching from comma separated value

html

arrays

checkbox

angularjs

angular-ng-if