Не удалось решить эту проблему, используя форму Angular checkbox, сформированную из API.
Я могу создать флажки, но две проблемы: проверка флажков не соответствует значениям в том, что исходит от API, и когда я нажимаю флажки, значение имени меняется со значения по умолчанию на "истина" или "ложь". Увидели другие подобные вопросы, но не могли заставить это работать. Здесь вы найдете и исходный код:
<!doctype html>
<html ng-app="checkTest">
<head>
<meta charset="utf-8">
<title>Angular Multiple Checkboxes</title>
<style>
label {display:block;}
</style>
<script src="/angular.js"></script>
<script type="text/javaScript">
var jsonObj = {"fruits":[
{
"name": "Apple",
"desc": "abcdefg",
"selected": "true",
"status": "Created"
},
{
"name": "Broccoli",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "Cucumber",
"desc": "abcdefg",
"selected": "false",
"status": "Created"
},
{
"name": "Daikon",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
]};
var fruitsObj = jsonObj.fruits;
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<label ng-repeat="fruit in fruits">
<input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
</label>
<p>Services: {{fruits}}</p>
</div>
<script type="text/javaScript">
var app = angular.module('checkTest', []);
app.controller('MainCtrl', function($scope) {
$scope.fruits = fruitsObj;
});
</script>
</body>
</html>
Просто логические значения должны быть true
или false
а не строковыми 'true'
или 'false'
Кроме того, не требуется директива ng-checked
. Вам также нужно использовать {{index}}
в поле формы, чтобы он стал уникальным элементом формы, например, serviceSelect-{{$index}}
наценка
<input
type="checkbox"
name="serviceSelect-{{$index}}"
ng-model="fruit.selected"
ng-value="{{fruit.name}}" />
Флажок для Углового значения является истинным или ложным. Код должен быть следующим:
<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">