使用 angularjs 将复选框显示为选中状态答案

【问题标题】：Show check box as checked using angularjs使用 angularjs 将复选框显示为选中状态
【发布时间】：2018-12-25 16:20:36
【问题描述】：

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

【问题讨论】：

您能向我们展示您尝试过的代码吗？
请阅读How to Ask。
一个简单的谷歌搜索会回答你。这是 jsfiddle jsfiddle.net/uberspeck/NW7zk
可能想看看：vitalets.github.io/checklist-model

【解决方案1】：

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

或

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

在 AngularJS 中

$scope.chk = true

或

$scope.chk = 1

就这么简单

【讨论】：

【解决方案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>

【讨论】：