0

「n」行のテーブルがあり、各行にはチェックボックスがあります。<div>チェックボックスを選択すると、タグ内にコード化された情報を表示しようとしています。

ただし、チェック ボックスの値が false の場合でも、div 内のデータは引き続き表示されます。div タグで ng-show を使用して、チェックボックスが true か false かを確認しています。

以下は、テーブル列で使用したコードです。

<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);
     }
   };

私が間違った方法でやっている場合は、指摘してください。角度のある世界にはかなり慣れていません。

4

3 に答える 3

0

バインド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>

于 2015-11-11T06:01:35.597 に答える
0

この例は、あなたの場合にはかなり良いかもしれません 

<a href="http://jsfiddle.net/t7kr8/211/" >Click here </a>
于 2015-11-11T05:59:29.367 に答える
0 

<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
                    }));
                });
            }
        }
    });

于 2015-11-11T06:08:15.367 に答える