不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值...

最新推荐文章于 2024-11-05 22:07:06 发布

weixin_30244889

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heyinwangchuan/p/6697002.html

版权

不知道你们遇到没遇到这种情况，谈谈ng-if/ng-repeat产生子作用域，ng-model取不到相应的值，这个问题是怎么产生的呢？，因为他们都各级产生了一个子作用域。

ng-repeat demo

ng-repeat经常是用来解析一个数组，将值赋值到一个list中

具体的$parent主要应用在重名的情况下

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<script>
    angular.module("myapp",[]).controller('myctrl',function($scope){
        $scope.item={
            name:"kangkang"
        }
        $scope.bbb="111"
        $scope.list=[{name:"limei"},{"name":'lily'}]
    })
</script>
<ul ng-controller="myctrl">
    <li ng-repeat="item in list">
        <div>这是子作用域获得到的值<span ng-bind="item.name"></span></div>
        <div>这是bbb获得到的值<span ng-bind="bbb"></span></div>
        <div>这是父作用域获得到的值<span ng-bind="$parent.item.name"></span></div>
        <div>这是父作用域bbb获得到的值<span ng-bind="$parent.bbb"></span></div>
    </li>
</ul>
</body>
</html>

ng-if demo

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .frame{
            padding: 5px 8px;
            margin: 0px;
            font-size: 12px;
            width: 320px;
            background-color: #eee;
        }
        .frame div{
            margin: 5px 0px;
        }
    </style>
</head>
<body>
<div ng-controller="myCtrl" class="frame">
    <div>
        a 的值： {{a}}  <br>
        b 的值： {{b}}
    </div>
    <div>
        普通方式： <input type="checkbox" ng-model="a">
    </div>
    <div ng-if="!a">
        ngIf方式：<input type="checkbox" ng-model="$parent.b">
    </div>
</div>

<script>
    angular.module('myApp', [])
        .controller('myCtrl', function($scope){
            $scope.a = false;
            $scope.b = false;
        })
</script>
</body>
</html>