Question

我有三个复选框： -

<label>Type:</label>
 <label>one</label>
    <input type="checkbox" name="type" ng-model="a.Type[0]"/>

  <label>two</label>
    <input type="checkbox" name="type" ng-model="a.Type[1]"/>

  <label>three</label>
    <input type="checkbox" name="type" ng-model="a.Type[2]"/>

这些复选框作为字符串数组存储在后端。

我的价值显示在： -

<li  class="list-group-item"><strong>Type</strong>: <span ng-repeat="values in myArray">{{values}}</span></li>

我的指令代码是： -

    (function () {
    'use strict';
    angular.module('myApp.components')
        .directive('abc', abc);

    abc.$inject = ['$http', '$timeout', 'ApiServices'];

    function abc($http, $timeout, ApiServices) {
        return {
            restrict: 'EA',
            scope: {

            },

            link: function (scope, el, attrs) {
                scope.a = {};

                $('#abc').on('hide.bs.modal', function () {
                    scope.active = false;
                });
                $('#abc').on('shown.bs.modal', function () {
                    scope.active = true;

                    scope.myArray = [];

                  scope.iterate = function () {
                   for (var key in scope.a.Type) {
                      if (scope.a.Type.hasOwnProperty(key)) {
                        scope.myArray.push(scope.a.Type[key]);
                      }
                   }
                  };

                  scope.iterate();
            },
            templateUrl: ''
        };
    }

})();

这里我要做的是 - 我想迭代'类型'复选框并将值推送到'myArray'，然后只显示值。

Answer 1

可能下面我的例子与你想要的有些相似：

HTML：

  <span>Select Type:</span>
  <div ng-repeat="type in myArray">
    <input type="checkbox" ng-model="type.value" /> {{type.type}}
  </div>

  <span>Selected Types:</span>
  <div ng-repeat="type in myArray">
    <span ng-show="type.value"> {{type.type}}</span>
  </div>

JS：

  $scope.a = {};
  $scope.a.Type = ["One","Two","Three"]; // your string array

  $scope.myArray = [];
  $scope.a.Type.forEach(function(item){
    $scope.myArray.push({type: item, value: false }); // create new array to make it selectable via checkbox
  });

我想，你现在不再需要你的指令了。迭代和过滤是在HTML本身完成的。

我希望这会有所帮助。

如何遍历checkbox对象

1 个答案: