При проверке ng мне нужны данные внутри div для отображения

Question

У меня есть таблица с 'n' количеством строк, и у каждой строки есть флажок. При выборе флажка я пытаюсь отобразить информацию, закодированную внутри <div> тег.

Но даже если флажок имеет значение false, данные внутри div все равно отображаются, я использую ng-show в теге div, чтобы проверить, является ли флажок 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);
     }
   };

Пожалуйста, укажите мне, если я делаю неправильно, я довольно новичок в мире углов.

Answer 1

Этот пример может быть очень хорошим для вашего случая

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

Answer 2

<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 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>