angularJs select绑定的model 取不到值

简介: angularJs select绑定的model 取不到值,原型继承的关系,父子级作用域,ng-if 以及 ng-repeat 会创建一个子级作用域
内容结构         

      一.原因分析

      二. 解决办法 

一.原因分析        
          1.由于原型继承的关系,修改父级对象中的someBareValue会同时修改子对象中的值,但反之则不行。
          2.ng-if 以及 ng-repeat 会创建一个子级作用域,如果在这俩个指令中添加了元素,并增加ng-model指令,那么ng-model对应的作用域属于子级作用域,并非controller注入的$scope对应的作用域。
二.解决办法(推荐使用第一种方式)       
         1.如果将模型对象的某个属性设置为字符串,它会通过引用进行共享,因此在子$scope中修改 属性也会修改父$scope中的这个属性。下面的例子展示了正确的做法:
  <div ng-controller="SomeController">
         {{ someModel.someValue }}
         <button ng-click="someAction()">Communicate to child</button>
         <div ng-controller="ChildController">
         {{ someModel.someValue }}
             <button ng-click="childAction()">Communicate to parent</button>
         </div>
</div>
     angular.module('myApp', [])
     .controller('SomeController', function($scope) {
// 最佳实践,永远使用一个模式 
       $scope.someModel = {
             someValue: 'hello computer'
         }
         $scope.someAction = function() {
             $scope.someModel.someValue = 'hello human, from parent';
}; })
     .controller('ChildController', function($scope) {
         $scope.childAction = function() {
             $scope.someModel.someValue = 'hello human, from child';
         };
}); 
    2.使用父级作用域                            
<select class="form-control m-b" ng-model="$parent.data"  ng-options="item.id as item.name for item in datas">
      <option value="">-- 请选择 --</option>
</select>
目录
相关文章
|
7月前
如何在 Angular 路由中使用查询参数
如何在 Angular 路由中使用查询参数
51 0
|
7月前
|
安全
如何在 Angular 中使用 innerHTML 属性绑定
如何在 Angular 中使用 innerHTML 属性绑定
91 0
|
10月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
前端开发
React+Hook+ts+antDesignMobile实现input自动获取功能
React+Hook+ts+antDesignMobile实现input自动获取功能
130 0
两步教你用Vue3+TS实现input组件的v-model属性
使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性,这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性 第一步
685 0
两步教你用Vue3+TS实现input组件的v-model属性
angular定义数组的三种方式
angular定义数组的三种方式
548 0
|
前端开发 JavaScript 索引
React中的TS类型过滤原来是这么做的!
大家好,我是零一,相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验 今天就来介绍一个在其它开源库中见到的既花里胡哨,又实用的TS类型——TS类型过滤
319 0
React中的TS类型过滤原来是这么做的!