Angular – ngIf指令的一个坑

被ngIf坑了一把,这里记录一下,在使用ngRepeat遍历数组的时候,大家都知道每个item都会创建一个新scope,我在每一层的item使用input的Radio来动态设置值,这时候input绑定的model是使用$parent.item 这种形式,按理说现在ngRepeat的item和其他model算是平级的了,但是ngRepeat外层我又使用了一层div来绑定ngIf判断,数组是否为空,结果是ngIf自己也会创建一层新的作用域。

下面是我写的demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-app="App" ng-controller="app">


<hr>
<h3>这里使用ng-if</h3>
    <div ng-if="1">
        <li ng-repeat="item in list">
            <input type="radio" name="name" ng-model="$parent.getName" ng-value="item.name">{{item.name}}
        </li>
    </div>

你选中的名字:{{getName}}
<hr>

<h3>这里使用ng-show</h3>

    <div ng-show="1">
        <li ng-repeat="item in list">
            <input type="radio" name="name" ng-model="$parent.getName2" ng-value="item.name">{{item.name}}
        </li>
    </div>

你选中的名字:{{getName2}}



</body>
<script src="angular.js"></script>
<script>
    /**
    * App Module
    *
    * Description
    */
    angular.module('App', []).controller('app', ['$scope', function($scope){
        
        $scope.list = []

        for (var i = 0; i < 20; i++ ) {
            $scope.list.push({"name":"王" + i});
        }


    }])


</script>
</html> 

 

文 / luna
LEAVE A REPLY

loading