CODEWITHSUNDEEP
javascriptangularjs
Harsh
Harsh

Reputation: 81

Angularjs ng-if is not working

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>

Upvotes: 0

Views: 135

Answers (2)

Jose Luis Berrocal
Jose Luis Berrocal

Reputation: 155

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)

Upvotes: 0

yBrodsky
yBrodsky

Reputation: 5041

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

Upvotes: 1

Related Questions