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>
目录
相关文章
|
12月前
|
JSON 数据格式 索引
Angular 里使用嵌套 Form 的步骤
Angular 里使用嵌套 Form 的步骤
|
11月前
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
|
12月前
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
两步教你用Vue3+TS实现input组件的v-model属性
使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性,这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性 第一步
569 0
两步教你用Vue3+TS实现input组件的v-model属性
|
Web App开发 开发者
Angular应用里input字段后面的_ngcontent-hqi是什么含义
Angular应用里input字段后面的_ngcontent-hqi是什么含义
105 0
Angular应用里input字段后面的_ngcontent-hqi是什么含义
Angular如何自定义attribute指令
Angular如何自定义attribute指令
114 0
Angular如何自定义attribute指令
|
JavaScript 前端开发
Angular routerLink指令的href属性生成逻辑
Angular routerLink指令的href属性生成逻辑
Angular routerLink指令的href属性生成逻辑
|
存储
Angular list列表绑定的一个例子
Angular list列表绑定的一个例子
142 0
Angular list列表绑定的一个例子
Angular set函数和Component属性的命名冲突问题
Angular set函数和Component属性的命名冲突问题
Angular set函数和Component属性的命名冲突问题
|
JavaScript
Angular refreshView里Component template函数的执行原理
Angular refreshView里Component template函数的执行原理
127 0
Angular refreshView里Component template函数的执行原理