AngularJS ng-if不起作用

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>

Answer 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

Answer 2

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)