AngularJS - Set Checkbox on Checked when Value is true

Question

i got a user json object:

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'
            }

        ]
    }
];

View in that i want to repeat Check:

<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>

What i found on Angular Material Website (I Shorten the Code): http://codepen.io/BamiGorengo/pen/KrGQEw

Here it works, the Checkbox is Checked when the Page Loads. I understand that it comes from the $scope.data = {}; When i remove in the codpen website, then the checkbox dont show the correct style to...

I tryed to add to my userService:

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

But this dont help... My JavaScript Skills are realy Bad.

You can't do "types in user.types" because user does not exist. Users is an array of users. Not sure what you're trying to do. — David H.
– David H., Commented Aug 5, 2016 at 12:58
I got alot of diffrent types. And in each type we got 2 Categories that i want to repeat. "check" and "rating" Depends what type i select in a select box, i want to display from a type the "check" and "rating" entries from the user. thommessen.upperyard.de/#/profile/1/sonstiges here you can see in live what i got now, maybe this helps to understand. — Sven Budak
– Sven Budak, Commented Aug 5, 2016 at 13:02
I understand. But your users is an array. You need user = {...}, not users = [{...}] — David H.
– David H., Commented Aug 5, 2016 at 13:03
You are totaly right. i got in the service some other stuff that translate users to user... sry for this. absolutly my fault. — Sven Budak
– Sven Budak, Commented Aug 5, 2016 at 13:16

Oliver · Accepted Answer · 2016-08-05 13:19:04Z

1

Remove the single Quotes by the value field :) 'value': 'false' => 'value': false

answered Aug 5, 2016 at 13:19

Oliver

561 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David H. Over a year ago

If the data is retrieved from a server in that specific format, user will not be able to change the type of the variables.

David H. · Accepted Answer · 2016-08-05 13:30:39Z

0

The problem is that your type.value is not a boolean, it is a string. This means that the first time it loads the checkboxes, it does not recognize the strings 'true' and 'false' as booleans. Try this:

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

And check https://material.angularjs.org/latest/api/directive/mdCheckbox for more info as to what this does.

Or make the values booleans instead of strings if you can.

edited Aug 5, 2016 at 13:30

answered Aug 5, 2016 at 13:09

David H.

5072 silver badges10 bronze badges

3 Comments

Sven Budak Over a year ago

Thanks alot! this was the problem. i made: 'value': 'false' with the ' ' but corret is it without ' ' like this: 'value': false

David H. Over a year ago

Yea I wasn't sure if the data you had was sent to you in that format. If you could change 'true' to true then you dont need ng-true, but if your data is dynamic and it comes as a string then you would need to implement ng-true

Sven Budak Over a year ago

i dont use now the ng-true-value="true" ng-false-value="false" because im still structuring the json shema. i just change the string to boolean.

Collectives™ on Stack Overflow

AngularJS - Set Checkbox on Checked when Value is true

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related