zoukankan      html  css  js  c++  java
  • 不知道你们遇到没遇到这种情况,谈谈ng-if/ng-repeat产生子作用域,ng-model取不到相应的值

    不知道你们遇到没遇到这种情况,谈谈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>
  • 相关阅读:
    MSDTC服务出错
    jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
    js:警惕firstChild
    基于jquery的表格排序
    jquery JSON的解析方式
    用JS jquery取float型小数点后两位
    JQuery之append和appendTo的区别,还有js中的appendChild用法
    js笔记之Math random()、ceil()、floor()、round()
    Oracle笔记
    STL: equal
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6697002.html
Copyright © 2011-2022 走看看