<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="x in records" ng-init="x.sys=false"> <div ng-if="(x==2)" ng-model="x.sys">{{x}}</div> <div ng-show="!x.sys">q</div> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ 1, 2, 3, 4, ] }); </script> </body> </html>

Displays: q 2 q q q

Need to:

q 2 q q

    2 answers 2

    Errors in the console make it clear what is wrong:

    TypeError: Cannot create property 'sys' on number '4'

    This error occurs when trying to perform an anguly

     x.sys=false

    Namely primitive add property.

    Next: it makes no sense to use the ng-model directive on a div element — it simply does nothing.

    And, finally, why an extra q is output: since the addition of the property failed, the x.sys expression always returns undefined, which, in conjunction with ! returns true for the ng-show directive.

    Thus, when an array element is 2, the element is output with ng-if and the element with ng-show , which is always output.

    To solve, you can use the adjacent answer, or use a local variable for the ng-repeat osprey, for example:

     var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ 1, 2, 3, 4, ] }); 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="x in records" ng-init="sys=x==2"> <div ng-if="(x==2)">{{x}}</div> <div ng-show="!sys">q</div> </div> </div>

      Try this

       <div ng-repeat="x in records"> <div ng-if="x==2">{{x}}</div> <div ng-if="x!=2">q</div> </div>