AngularJS-在值為true時選中復選框

Question

我有一個用戶json對象：

var users = [
    {
        firstName: 'Sven',
        lastName: 'Butzbak',
        userID: '1', // TODO refactor to _id
        gender: 'male',
        avatar: 'imageurl',
        notice: 'Fast fertig mit Theorie',
        'types': [
            {
                'type': 'am',
                'title': 'AM',
                'icon': 'am',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
                'check': [
                    {
                        'id': '1',
                        'name': 'Motor anlassen',
                        'value': 'false'
                    },
                    {
                        'id': '2',
                        'name': 'Los fahren',
                        'value': 'true'
                    },
                    {
                        'id': '3',
                        'name': 'Spiegel einstellen',
                        'value': 'true'
                    },
                    {
                        'id': '4',
                        'name': 'Vorgespräch',
                        'value': 'false'
                    }
                ],
                'rating': [
                    {
                        'id': '1',
                        'name': 'Ausfahrt verlassen',
                        'rating': '1'
                    },
                    {
                        'id': '2',
                        'name': 'Pokemon zocken beim Fahren',
                        'rating': '2'
                    },
                    {
                        'id': '3',
                        'name': 'Mitbürger beleidigen',
                        'rating': '3'
                    }
                ]
            },
            {
                'type': 'a1',
                'title': 'A1',
                'icon': 'a1',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
                'ckeckCategory': [
                    {
                        'id': '1',
                        'name': 'Motor anlassen',
                        'value': 'true'
                    },
                    {
                        'id': '2',
                        'name': 'Los fahren',
                        'value': 'false'
                    }
                ],
                'ratingCategory': [
                    {
                        'id': '1',
                        'name': 'Ausfahrt verlassen',
                        'rating': '1'
                    },
                    {
                        'id': '2',
                        'name': 'Pokemon zocken beim Fahren',
                        'rating': '2'
                    },
                    {
                        'id': '3',
                        'name': 'Mitbürger beleidigen',
                        'rating': '3'
                    }
                ]
            },
            {
                'type': 'a2',
                'title': 'A2',
                'icon': 'a2',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'a',
                'title': 'A',
                'icon': 'a',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'b-bf17',
                'title': 'B-BF17',
                'icon': 'b-bf17',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'b96',
                'title': 'B96',
                'icon': 'b96',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'be',
                'title': 'BE',
                'icon': 'be',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'c1',
                'title': 'C1',
                'icon': 'c1',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'c1e',
                'title': 'C1E',
                'icon': 'c1e',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'c',
                'title': 'C',
                'icon': 'c',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'ce',
                'title': 'CE',
                'icon': 'ce',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'd1',
                'title': 'D1',
                'icon': 'd1',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'd1e',
                'title': 'D1E',
                'icon': 'd1e',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'd',
                'title': 'D',
                'icon': 'd',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'de',
                'title': 'DE',
                'icon': 'de',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 't',
                'title': 'T',
                'icon': 't',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            },
            {
                'type': 'l',
                'title': 'L',
                'icon': 'l',
                'minAge': '16 Jahre',
                'include-classes': 'keine',
            }
        ],
        'events': [
            {
                'id': 1,
                'name': 'Fahrstunde',
                'date': '26.07.2016',
                'time': '08:45'
            },
            {
                'id': 2,
                'name': 'Theorie Stunde',
                'date': '29.07.2016'
            }

        ]
    }
];

鑒於我想重復檢查：

<ul class="user-progress check" ng-repeat="types in  user.types">
    <fieldset class="standard">
        <legend>Fragen</legend>
        <li ng-repeat="cat in  types.check">
            <div>{{cat.name}}</div>
            <div>
                <md-checkbox ng-model="cat.value">
                    {{cat.value}}
                </md-checkbox>
            </div>
        </li>
    </fieldset>
</ul>

我在Angular Material網站上找到的內容（我簡稱為代碼）： http : //codepen.io/BamiGorengo/pen/KrGQEw

在這里工作，在頁面加載時選中復選框。 我了解它來自$ scope.data = {};。 當我在codpen網站上刪除時，復選框未顯示正確的樣式來...

我試圖添加到我的userService中：

$scope.types.check.value = {};

但這無濟於事...我的JavaScript技能真的很糟糕。

Answer 1

刪除值字段中的單引號:)'value'：'false'=>'value'：false

Answer 2

問題是您的type.value不是布爾值，而是字符串。 這意味着第一次加載復選框時，不會將字符串“ true”和“ false”識別為布爾值。 嘗試這個：

<md-checkbox ng-model="cat.value" ng-true-value="true" ng-false-value="false">

並檢查https://material.angularjs.org/latest/api/directive/mdCheckbox以獲取有關此功能的更多信息。

或者，如果可以的話，將值設為布爾值而不是字符串。