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

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

AngularJs не связывается с ng-проверено с помощью ng-модели

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

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

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

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

Заранее спасибо!

75 голосов | спросил Abilash 17 Mayam13 2013, 07:38:54

5 ответов


0

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

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

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

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

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

ответил Langdon 17 Mayam13 2013, 07:52:19
0

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

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

ng-true-value="'1'"
ответил JRT 7 PMpTue, 07 Apr 2015 14:08:49 +030008Tuesday 2015, 14:08:49
0

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

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

ответил Scott 18 PM00000030000000831 2016, 15:51:08
0

Может объявить как in 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

ответил Naveen Kumar 7 WedEurope/Moscow2016-12-07T13:14:53+03:00Europe/Moscow12bEurope/MoscowWed, 07 Dec 2016 13:14:53 +0300 2016, 13:14:53
0

Директивы ng-model и ng-checked не следует использовать вместе

Из документов:

  

ngChecked

     

Устанавливает проверенный атрибут для элемента, если выражение внутри ngChecked является правдивым.

     

Обратите внимание, что эту директиву не следует использовать вместе с ngModel , так как это может привести к неожиданному поведению .

     

- Справочник по директиве AngularJS с проверкой ng


Вместо этого установите желаемое начальное значение с контроллера:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />
$scope.testModel = { item1: true };
ответил georgeawg 6 J000000Friday18 2018, 19:57:30

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132