• ng-show和ng-if的区别


    第一点区别是, 
    ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, 
    ng-show 是初始时就创建了,用display:block 和 display:none 来控制显示和不显示。


    第二点区别是, 
    ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。 
    这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

    针对第二点,如果想传递给外层的model,则在ng-if的ng-model中加一个$parent即可,如下:

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    	“父级”环境
    	<input type="text" ng-model="parentVal"><br><br><br><br>
    	<div ng-if="parentVal == 'a'" style="border:1px solid #ccc;200px;height:200px;margin:20px">
    		"子"环境
    		<input type="text" ng-model="childVal"></br>
    		内层显示ng-if的model: {{childVal}}
    	</div>
    	
    	在外层显示ng-if中的model: {{childVal}}
    	
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        
    });
    </script>
    
    </body>
    </html>
    

      

    参考网址:http://blog.csdn.net/sinat_31057219/article/details/60780479

  • 相关阅读:
    17-vue-cli脚手架安装和webpack-simple模板项目生成
    15-其它
    14-表单输入绑定
    k8s组件通信或者创建pod生命周期
    升级CentOS 7.4内核版本--升级到最新
    Linux
    Statefulset的拓扑状态
    nginx浏览器开启密码验证
    为什么我们需要Pod?(容器设计模式sidecar)
    mysql内存优化
  • 原文地址:https://www.cnblogs.com/mini-fan/p/6950628.html
Copyright © 2020-2023  润新知