CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Vadym
Vadym

Reputation: 548

Bug while using ngRepeat. Set checkboxes and radio buttons checked in a wrong way

I have an array of users in the controller of the component. I've tried to print it using ngRepeat directive. There're following bugs in the final result:

I have the following list of users' objects:

$scope.users = [
                 {
                    id: 1,
                    name: 'John',
                    birthday: '06.07.2008',
                    city: 'Budapest',
                    active: false,
                    boss: false
                 },
                 {
                    id: 2,
                    name: 'Mary',
                    birthday: '01.02.2003',
                    city: 'Berlin',
                    active: true,
                    boss: true
                 },
                 {
                    id: 3,
                    name: 'James',
                    birthday: '04.05.2006',
                    city: 'Vienna',
                    active: false,
                    boss: false
                 }
            ];

Functions that check both statuses of each user:

            $scope.isActive = function (id) {
                return $scope.users[id].active;
            }

            $scope.isBoss = function (id) {
                console.log(id);
                return $scope.users[id].boss;
            }

The actual template(view):

<tbody>
        <div>
            <tr ng-click="goToProfile(user.id)" ng-repeat="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.birthday}}</td>
                <td>{{user.city}}</td>
                <td>
                    <input type="checkbox" name="active" ng-checked="{ checked: isActive($index) }">
                    <h1>{{isActive($index)}}</h1>
                </td>
                <td>
                    <input type="radio" name="boss" ng-checked="{ checked: isBoss($index) }">
                    <h1>{{isBoss($index)}}</h1>
                </td>
            </tr>
        </div>
    </tbody>

I've done some test prints to make sure that it reads needed fields correctly. The actual result you can see on the screenshot and in the code. Thanks in advance!

Upvotes: 1

Views: 311

Answers (3)

JB Nizet
JB Nizet

Reputation: 691635

You're using 

$scope.users[id]

to access the user with a given id. But what you pass is not an id. It's an index. That makes your code confusing. You should pass the user itself, instead of its index. And in fact, you don't even need these functions at all, since you can just just user.active, and user.boss.

You don't need ng-checked either. Just use ng-model

<tr ng-click="goToProfile(user)" ng-repeat="user in users">
    <td>{{ user.id }}</td>
    <td>{{ user.name }}</td>
    <td>{{ user.birthday }}</td>
    <td>{{ user.city }}</td>
    <td>
        <input type="checkbox" name="active" ng-model="user.active">
        <h1>{{ user.active }}</h1>
    </td>
    <td>
        <input type="checkbox" name="boss" ng-model="user.boss">
        <h1>{{ user.boss }}</h1>
    </td>

Note that I changed the radio to a checkbox, since two of your users are bosses, and it thus not make much sense to use a radio button.

If you want a radio button, then the model should be adapted; you should have an attribute in the scope referencing the unique user being the boss:

$scope.model = {
    boss: $scope.users.filter(function(user) {
        return user.boss;
    })[0]
};

and in your view:

<input type="radio" name="boss" ng-model="model.boss" ng-value="user"/>

Upvotes: 3

Rares
Rares

Reputation: 49

You set a name to the radio button, that made them part of the same group, which did not allow multiple radio buttons to be checked at the same time.

In addition, ng-checked should receive an expression, in this case the function call.

The following code suits your needs.

<tr ng-click="goToProfile(user.id)" ng-repeat="user in users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.birthday}}</td>
    <td>{{user.city}}</td>
    <td>
      <input type="checkbox" name="active" ng-checked="isActive($index)">
      <h1>{{isActive($index)}}</h1>
    </td>
    <td>
      <input type="radio" ng-checked="isBoss($index)">
      <h1>{{isBoss($index)}}</h1>
    </td>
  </tr>

Upvotes: 2

atcastroviejo
atcastroviejo

Reputation: 263

You could simply use ng-model="user.active" in the checkbox. No functions needed.

The same goes for the input radio.

Hope this helps. Check out the angular documentation for inputs.

Upvotes: 1

Related Questions