javascript - 在 ng-checked 上，我需要显示 div 内的数据

Question

我有一个行数为“n”的表，每行都有一个复选框。选择复选框后，我试图显示<div>标签内编码的信息。

但是即使复选框的值是假的，仍然会显示 div 内的数据，我在 div 标签中使用 ng-show 来检查复选框是真还是假。

以下是我在表格列中使用的代码：

<td>
    <input id="{{test}}" type="checkbox" value="" ng-checked="selection.indexOf(test) > -1" ng-click="toggleSelection(test)" />
</td>

在 JavaScript 中，我有以下切换功能

按索引切换给定行项目的选择

  $scope.toggleSelection = function toggleSelection(test) {
    var idx = $scope.selection.indexOf(test);    
 if it is  currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }    
     if it is newly selected
     else {
       $scope.selection.push(test);
     }
   };

如果我做错了，请指出我，我对角度世界很陌生。

Answer 1

<div ng-app="checkbox" ng-controller="homeCtrl">
    <div ng-repeat="item in list">
        <input type="checkbox" checkbox-group />
        <label>{{item.value}}</label>
    </div>{{array}}
    <br>{{update()}}
</div>

var app = angular.module('checkbox', []);

app.controller('homeCtrl', function($scope) {
        $scope.array = [1, 5];
        $scope.array_ = angular.copy($scope.array);
        $scope.list = [{
            "id": 1,
            "value": "apple",
        }, {
            "id": 3,
            "value": "orange",
        }, {
            "id": 5,
            "value": "pear"
        }];

        $scope.update = function() {
            if ($scope.array.toString() !== $scope.array_.toString()) {
                return "Changed";
            } else {
                return "Not Changed";
            }
        };

    })
    .directive("checkboxGroup", function() {
        return {
            restrict: "A",
            link: function(scope, elem, attrs) {
                // Determine initial checked boxes
                if (scope.array.indexOf(scope.item.id) !== -1) {
                    elem[0].checked = true;
                }

                // Update array on click
                elem.bind('click', function() {
                    var index = scope.array.indexOf(scope.item.id);
                    // Add if checked
                    if (elem[0].checked) {
                        if (index === -1) scope.array.push(scope.item.id);
                    }
                    // Remove if unchecked
                    else {
                        if (index !== -1) scope.array.splice(index, 1);
                    }
                    // Sort and update DOM display
                    scope.$apply(scope.array.sort(function(a, b) {
                        return a - b
                    }));
                });
            }
        }
    });

Answer 2

这个例子可能非常适合你的情况

<a href="http://jsfiddle.net/t7kr8/211/" >Click here </a>

Answer 3

确保您model与ng-show

    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope) {
      var _this = this;
      $scope.tempArr = [{
        status: false,
        data: 'hey'
      }, {
        status: false,
        data: 'hey'
      }, {
        status: false,
        data: 'hey'
      }];
      $scope.tempArr = [{
        status: false,
        data: 'hey'
      }, {
        status: false,
        data: 'hey'
      }, {
        status: false,
        data: 'hey'
      }];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp" ng-controller="formCtrl">
  <table>
    <tr ng-repeat="item in tempArr">
      <td>
        <input type="checkbox" ng-model="item.status">
      </td>
      <td><span ng-show="item.status">{{item.data}}</span>
      </td>
    </tr>
  </table>
</div>