Need to get checkboxes checked in Angular if-statement

Question

I have two lists of IDs that I need to check against. If they match then that check-box should be checked. I'm new to angularJs so please help me with this. My code looks like this now. All Media is a object with many values. mediaIdFromSpecifikLead is just a list with int id.

 <tr ng-repeat="media in allMedia">
        <div ng-repeat="mediaFromLead in mediaIdFromSpecificLead">
            <div ng-if="media.Id == mediaFromLead ">
                <td>
                    <input type="checkbox" ng-checked="true" />
                </td>
            </div>
            <div ng-if="media.Id != mediaFromLead ">
                <td>
                    <input type="checkbox" ng-checked="false" />
                </td>
            </div>
        </div>
    </tr>

With this code it even shows TWO check-boxes (one checked and one empty) so not even that works so I have probably done this totally wrong.

EDIT: So I want only one check-box for each media-file. That check-box should be checked if my Lead is connected to that media-file, otherwise it should stay unchecked.

Juan · Accepted Answer · 2015-03-24 10:44:58Z

15

There is no point on using ng-checked there as you are not binding to any model. You can just use checked in that case (your logic is in the ng-if):

<tr ng-repeat="media in allMedia">
<div ng-repeat="mediaFromLead in mediaIdFromSpecificLead">
    <div ng-if="media.Id == mediaFromLead ">
        <td>
            <input type="checkbox" checked="true" />
        </td>
    </div>
    <div ng-if="media.Id != mediaFromLead ">
        <td>
            <input type="checkbox" checked="false" />
        </td>
    </div>
</div>
</tr>

If you want to do the check with ng-check the following should work:

<tr ng-repeat="media in allMedia">
<div ng-repeat="mediaFromLead in mediaIdFromSpecificLead">
    <input type="checkbox" ng-checked="media.Id == mediaFromLead" />
</div>
</tr>

If you want just a checkbox per media (and not per mediaFromLead). You will need to change it to use a function in your controller to do the check instead of a ng-checked. Something like this:

<tr ng-repeat="media in allMedia">
    <input type="checkbox" ng-checked="checkIfInMediaFromLead(media.Id, mediaFromLead)" />
</tr>

The checkIfInMediaFromLead function should return a bool.

edited Mar 24, 2015 at 10:44

answered Mar 23, 2015 at 11:28

Juan

3,70323 silver badges34 bronze badges

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

4 Comments

Johan Byrén Over a year ago

But now it prints 3 checkboxes if i got three mediaFromLead? it checks the right boxes and so but this is wierd :P

Juan Over a year ago

Eddited to try to cover your scenario (that requirement wasn't clear in your question :P)

Johan Byrén Over a year ago

Must say you are awesome Juan! Thank u! sry for not being clear in the question. Now it works like a charm! :)

Juan Over a year ago

Glad to help. It would be great if you can edit the question to explain exactly what you were trying to achieve. For the record.

Satyam Koyani · Accepted Answer · 2015-03-23 11:42:38Z

4

First of all remove your ng-if condition. Here you have used ng-checked then write your condition in such a way that it will return true false as per your requirement.

<tr ng-repeat="media in allMedia">            
   <td ng-repeat="mediaFromLead in mediaIdFromSpecificLead">
     <input type="checkbox" ng-checked="media.Id == mediaFromLead" />
   </td>
</tr>

Above is the optimistic solution.

Now if the condition is true then checkbox is selected else it will not be selected.

NOTE : Here you have not specified the definition of two json object which you are comparing. Please make sure regarding your condition.

edited Mar 23, 2015 at 11:42

answered Mar 23, 2015 at 11:37

Satyam Koyani

4,2842 gold badges26 silver badges49 bronze badges

Collectives™ on Stack Overflow

Need to get checkboxes checked in Angular if-statement

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related