Угловые флажки не связываются должным образом

Question

Угловые флажки не связываются должным образом

0

Не удалось решить эту проблему, используя форму 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/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>

Dave Kanter 02 июль 2015, в 00:02

Источник

Теги:

javascript

angularjs

checkbox

angularjs-controller

angularjs-forms

2 ответа

0

Флажок для Углового значения является истинным или ложным. Код должен быть следующим:

<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">

Johnny Ha 01 июль 2015, в 19:34

Ещё вопросы

Pankaj Parkar · Accepted Answer · 2015-07-01T20-34-00.000Z

Просто логические значения должны быть true или false а не строковыми 'true' или 'false'

Кроме того, не требуется директива ng-checked. Вам также нужно использовать {{index}} в поле формы, чтобы он стал уникальным элементом формы, например, serviceSelect-{{$index}}

наценка

<input 
    type="checkbox" 
    name="serviceSelect-{{$index}}" 
    ng-model="fruit.selected" 
    ng-value="{{fruit.name}}" />

Demo Plunkr

согласовано. ваша модель должна равняться fruit.selected, а данные true / false должны быть логическими.
Я думаю, что описание того, что делает {{$ index}}, улучшило бы ответ, если вы хотите отредактировать, но я понял это сам. Спасибо!
@DaveKaye Прошу прощения за то же самое .. Я забыл добавить это описание. Обновил его .. Рад помочь вам .. Спасибо :)