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>
  • 相关阅读:
    13种状况不宜立即止损
    市场运行趋势该如何研判
    炒股的九重境界
    标准止损法
    又感冒了
    量价分析之毕生经验之谈
    您的电池出现问题,因此可能导致您的计算机突然关机 出现红色X
    《股票大作手操盘术》读书笔记
    Spring.NET学习笔记——目录(原)
    Spring.NET实用技巧2——NHibernate访问Oracle数据库
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6697002.html
Copyright © 2011-2022 走看看