Update Item in List to be shown when tapped - Angular JS

Question

I have a list that shows some items, here is the code that generates my list in my controller:

$scope.multipleOptions = [{ item: '1', checkmark:false}, { item: '2', checkmark:false},{ item: '3', checkmark:false} ];

Then in my HTML I have

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected($index)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="{{multipleOption.checkmark}}"></p>
        </ion-item>
</ion-list>

As you can see when the list loads the checkmarks for all the items are hidden, and I have a function called checkSelected($index) that is called when an item is tapped, in that function I want to set the checkmark to be shown, here is what I currently have

$scope.checkSelected = function(modalIndex) {
        //this set the checkmark property to true
        $scope.multipleOptions[modalIndex].checkmark = true;
        //the line below does not work 
        document.getElementById("multipl-select-list").getElementsByTagName("ion-item")[modalIndex].getElementsByTagName("p")[1].show = true;
    }

In the above method I am able to set the checkmark variable of the item to ture but what I am having troubel with is making it show right when the item is tapped? How can I set the ng-show of the checkmark so it shows right when it is tapped?

EDIT Solutions both worked I just wanted to add some behabiour I noticed, when I had ng-show={{multipleOption.checkmark}} the ng-hide class would be added to the class of that <p> so even when I set ng-show to true it would still not be shown

Thanks for all the help

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

I think the problem is with your syntax. Try removing curly brackets. Also take a look a this answer

ng-show="multipleOption.checkmark"

edited May 23 '17 at 11:44

Community

1
1

answered Aug 10 '16 at 16:48

korteee

2,640
2
18
24

thanks would you mind taking a look at the edit I added, just wondering why that would happed – iqueqiorio Aug 10 '16 at 16:58

score 1 · Accepted Answer · answered Aug 10 '16 at 16:50

1

HTML :

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected(multipleOption)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="multipleOption.checkmark"></p>
        </ion-item>
</ion-list>

In javascript function :

$scope.checkSelected = function(data) {
    data.checkmark = true;
}

answered Aug 10 '16 at 16:50

Aks1357

1,062
1
9
19

thanks would you mind taking a look at the edit I added, just wondering why that would happed – iqueqiorio Aug 10 '16 at 16:58
@iqueqiorio - sorry, but i didn't get you, can you re-phrase it – Aks1357 Aug 10 '16 at 17:33
when I originally had `ng-show="{{multiple.checkmark}}"` they when I went to that page in my browser and looked at this tag `
` in the browser it showed `
` It added `ng-hide` to the class, so even when I manually changed the `ng-show` attribute to `true` it still was not shown, until I deleted `ng-hide` from the class attribute, make sense? – iqueqiorio Aug 10 '16 at 17:39
What do you mean you changed manually the ng-show attribute ? By the time you have `ng-show="{{multiple.checkmark}}"` it gets it as `false` so angular automatically adds ng-hide class. – korteee Aug 10 '16 at 19:52
1

@iqueqiorio - make sense? hmmm, not completely, but i am assuming you changing manually in browser (developer console/firebug); changing ng-show to true or false won't hide or show the element, adding/removing ng-hide from class will hide/show the element – Aks1357 Aug 10 '16 at 20:41

Update Item in List to be shown when tapped - Angular JS

2 Answers2