Question

我正在使用angularjs。我有json的样本列表。我使用ng-repeat显示列表，我在html中有复选框。我需要点击是否单击用户复选框（未选中或未选中）。

这是一个有效的例子：

var app = angular.module('MyApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.result = {};
  $scope.result.name = 'World';
  var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';

  $scope.result.list = JSON.parse(data);
});

<script src="https://code.angularjs.org/1.4.9/angular.js"></script>

<div ng-app="MyApp" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>{{result.list.name}}
  <ul>
    <li ng-repeat="list in result.list">
      <input type="checkbox" ng-model="list.isChecked" ng-checked="list.checked == 1">- {{list.name}}</li>
  </ul>
</div>

预期产出：

查找用户是否单击了复选框。如果已选中复选框（3＆amp; 5）。如果用户未选中则意味着我需要识别。

或者，这是一个Plunker。

Answer 1

据我所知，您想检查用户是否单击了复选框。请查看以下代码更改或Plunker

此代码将isClicked属性添加到单击的复选框中。它还在checked属性中存储复选框的当前值。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.result = {};
  $scope.result.name = 'World';
  var data = '[ { "button": 1, "name": "Test-1", "checked" : 0 }, { "button": 2, "name": "Test-2", "checked" : 0 }, { "button": 3, "name": "Test-3", "checked" : 1 }, { "button": 4, "name": "Test-4", "checked" : 0 }, { "button": 5, "name": "Test-5", "checked" : 1 } ]';

  $scope.result.list = JSON.parse(data);
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>

</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>{{result.list}}
  <ul>
    <li ng-repeat="list in result.list">
      <input type="checkbox" ng-model="list.checked" ng-click="list.isClicked = true" ng-true-value="1" ng-false-value="0">- {{list.name}}</li>
  </ul>
</body>

</html>

是否点击了Angularjs + Check复选框

1 个答案: