Question

我已经提交了一个包含复选框值的表单。要查看该表单，如何使用angularjs将复选框显示为“已选中”？我从数据源读取值。

Answer 1

<input type="checkbox" checked="{{chk}}">

或

<input type="checkbox" ng-model="chk">

在AngularJS中

$scope.chk = true

或

$scope.chk = 1

那么简单

Answer 2

如果我理解正确，那么您是否已经从一种或多种表单中提交并保存了数据？然后，您想显示已检查的项目吗？还是包含所有项目的表单，并选中了已选中的复选框？

对于任何一个，这将有助于知道您所读取的数据是如何呈现的。您需要从本地存储或保存数据的地方获取数据。对于此示例，我将其保存在$ scope.model中。

var App = angular.module('App', []);
App.controller('MyCtrl', function ($scope) {
    
    $scope.model = {
    	"Item 1":true,
    	"Item 2":true,
    	"Item 3":false
    };
    
//for the list :
    $scope.checked = []
        for(var i in $scope.model){
            if($scope.model[i]){
                $scope.checked.push(i)
            }
        };
	});

body {padding:20px}
div {padding: 10px 0}
p{display: inline}
label {margin-left: 10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="MyCtrl">
  <div>
    <p>Box checked :</p>
    <label class="checkbox" ng-repeat="(key, value) in model">
        <input
            type="checkbox"
            ng-model="model[key]"/>{{key}}</label>
  </div>
  <hr/>
  <div>
    <p>List of checked item :</p>
    <ul ng-repeat="item in checked">
      <li>{{item}}</li>
    </ul>
  </div>
</body>

显示复选框已使用angularjs选中

2 个答案: