Как мне установить флажки для привязки к логическим значениям в моей модели данных?

Я просматривал похожие вопросы в течение нескольких часов, но не придумал ничего, что точно соответствует. Я хочу, чтобы флажок был автоматически проверен посредством привязки данных к истинному/ложному значению в моих данных. Я могу получить имена элементов для загрузки без проблем, и я могу даже вытащить значения флажка позже для сохранения на сервер, но я не могу правильно загрузить начальные значения.

Здесь приведенный пример, который показывает фундаментальную проблему; HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="shoppingListNg.js"></script>
<body ng-app>
<div ng-controller="ShoppingListCtrl">
    <table>
        <tr ng-repeat="item in shoppingList">
            <td>
                <div>{{item.text}}</div>
            </td>
            <td>
                <input type="checkbox" ng-model="item.isGotten" />
            </td>
        </tr>
    </table>
</div>
</body>

И вот Javascript:

function ShoppingListCtrl($scope) {
    $scope.shoppingList = [
      {
      "text": "V8 fusion",
      "isGotten": "true"
      }, 
      {
      "text": "Whole milk container",
      "isGotten": "false"
      },
      {
      "text": "Protein bars",
      "isGotten": "true"
      }
   ];
};

Любая идея, почему я не могу установить эти флажки для оценки "истинных" и "ложных" значений в модели? При загрузке страницы они всегда отображаются непроверенными. Нужно ли использовать ng-check или другую директиву?

Ответы

Ответ 1

Проблема в том, что у вас есть "истина" и "ложь" в кавычках, что делает их строками вместо логических, которые Angular может привязать к этому флажку.

Если вы просто удалите кавычки следующим образом, ваш код будет работать правильно. Рабочий пример: http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW.

function ShoppingListCtrl($scope) {
    $scope.shoppingList = [
      {
      "text": "V8 fusion",
      "isGotten": true
      }, 
      {
      "text": "Whole milk container",
      "isGotten": false
      },
      {
      "text": "Protein bars",
      "isGotten": true
      }
   ];
};

Ответ 2

В зависимости от ваших данных вы можете не хотеть использовать чистый true/false в вашем коде. AngularJS в любом случае оценивает true/false и 1/0 booleans в строки, поэтому вам может быть лучше использовать строки.

В этом кодексе я использую "1" и "0" для булевых значений, а ngTrueValue и ngFalseValue сообщают AngularJS, как сохранить привязки неповрежденными. Очень простой и чистый.

Codepen здесь: http://codepen.io/paulbhartzog/pen/kBhzn

Фрагмент кода:

<p ng-repeat="item in list1" class="item" id="{{item.id}}">
  <strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below
</p>
<pre>{{list1 | json}}</pre>

Ответ 3

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

ng-true-value="'1'"