Angularjs ng-if is not working

Question

Appreciate if anyone could help explain why my checkbox Voted: is not able to control the ng-if directive? However, it is workable for the Keep HTML: check box

<p>
  <li ng-repeat="x in info">
    {{x.name}} Voted:
    <input type="checkbox"
      ng-model="myVar"
      ng-init="myVar =true">
  </li>
</p>

<input type="checkbox" ng-model="myVar" ng-init="myVar =true">
<h1 ng-if="myVar">Welcome2</h1>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.myObj = {
      "color": "white",
      "background-color": "coral",
      "font-size": "60px",
      "padding": "50px"
    }

    $scope.info = [{
      name: 'woon',
      age: '18'
    },
    {
      name: 'amir',
      age: '17'
    }];
  });
</script>

Why the binding to `myVar` multiple times, its in both the repeat loop as well as the input underneath? — Igor, Nov 23 '16 at 18:13

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

You need to use ng-show. Working example:

ng-show="myVar"

http://jsfiddle.net/f8cjv7eL/

what is the difference between ng-if and ng-show/ng-hide

edited May 23 '17 at 12:07

Community

1
1

answered Nov 23 '16 at 18:10

yBrodsky

4,981
3
20
31

thanks for message, on the basis of woon Voted check or amir Voted check i want to show Welcome2 like Keep HTML – Harsh Nov 23 '16 at 18:13
1

I don't understand what you mean. In that loop you are binding multiple times to the same variable, that's wrong. – yBrodsky Nov 23 '16 at 18:15
Okay based on checkbox check and uncheck i want to display Welcome2 message. like we are doing for Keep HTML check and uncheck. I want to do the same for woon and amir checkbox – Harsh Nov 23 '16 at 18:17
The problem is probably the scope inside the ng-repeat. Do you want to show one message next to each checkbox or 1 in general? – yBrodsky Nov 23 '16 at 18:23
If i check any checkbox it will show Welcome2 else hide Welcome2 – Harsh Nov 23 '16 at 18:26
Here you have a rough example, I can't think of anything else right now. http://jsfiddle.net/1rL6zpqh/ – yBrodsky Nov 23 '16 at 18:31
Yes some thing like this but can't we do the same in my code without making so many changes. ? – Harsh Nov 23 '16 at 18:50

score 0 · Answer 2 · answered Feb 04 '19 at 16:12

You shouldn't use template variables for that, use scope.myVar that way you can change it any time depending on , by the way, myVar is out of loop, you have 2 options

1) extract that value in JS part (only if the value is being calculated) 2) move that input into the loop (if you need to display an input for every record on the array)

Angularjs ng-if is not working

2 Answers2