CODEWITHSUNDEEP
angularjsif-statementcheckbox
Johan Byrén
Johan Byrén

Reputation: 918

Need to get checkboxes checked in Angular if-statement

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.

Upvotes: 3

Views: 55661

Answers (2)

Juan
Juan

Reputation: 3705

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.

Upvotes: 15

Satyam Koyani
Satyam Koyani

Reputation: 4274

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.

Upvotes: 4

Related Questions