AngularJS: ng-модель, не привязанная к ng-check для флажков

Я упомянул об этом, прежде чем задавать этот вопрос.

AngularJs не связывает ng-check с ng-моделью

Если ng-checked оценивается как true на стороне html, ng-model не обновляется. Я не могу ng-repeat, как было предложено в вышеупомянутом вопросе, потому что я должен использовать некоторый стиль для каждого флажка.

Вот плункер, который я создал, чтобы проиллюстрировать мою проблему.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Чтобы узнать, что я хочу, откройте консоль и просто нажмите кнопку Submit. Не проверяйте флажки.

Спасибо заранее!

ОТВЕТЫ

Ответ 1

ngModel и ngChecked не предназначены для совместного использования.

ngChecked ожидает выражение, поэтому, говоря ng-checked="true", вы в основном говорите, что флажок всегда будет проверяться по умолчанию.

Вы должны просто использовать ngModel, привязанный к логическому свойству на вашей модели. Если вам нужно что-то еще, вам либо нужно использовать ngTrueValue и ngFalseValue (которые поддерживают только строки прямо сейчас), либо написать свою собственную директиву.

Что именно вы пытаетесь сделать? Если вы хотите, чтобы первый флажок был установлен по умолчанию, вы должны изменить свою модель - item1: true,.

Изменить: вам не нужно отправлять форму для отладки текущего состояния модели, кстати, вы можете просто сбросить {{testModel}} в свой HTML (или <pre>{{testModel|json}}</pre>). Кроме того, ваши атрибуты ngModel могут быть упрощены до ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

Ответ 2

Вы можете использовать ng-value-true, чтобы сообщить angular, что ваша ng-модель является строкой.

Я мог бы получить только действие ng-true-value, если бы добавил дополнительные кавычки, подобные этому (как показано в официальном документе angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)

ng-true-value="'1'"

Ответ 3

Что вы могли бы сделать, это использовать ng-repeat, передавая значение того, что вы делаете в t ng-checked, а затем используя ng-class, чтобы применить свои стили в зависимости от результата.

Недавно я сделал что-то подобное, и это сработало для меня.

Ответ 4

Можно объявить, как и в ng-init также получить истинную

<!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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

И вы можете выбрать первый и объект Также показаны здесь true, false, flase