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>
目录
相关文章
|
人工智能 编解码 自然语言处理
泛娱乐出海Plus时代,音视频能力基座与时俱进
泛娱乐的音视频技术随着出海在演进,交互和内容的技术是内核,也在融合。
474 2
泛娱乐出海Plus时代,音视频能力基座与时俱进
|
编解码 Android开发 iOS开发
airserver软件激活码mac版
AirServer 可以方便的利用 AirPlay, Google Cast 以及 Miracast 等技术,将 iPhone, iPad, Mac, Android, Nexus, Pixel, Chromebook, 以及 PC 上面的内容投影到更大的屏幕上面,从而更好的促进协作。
7316 0
|
存储 Kubernetes 监控
如何管理越来越多的 operator?OLM 给你答案
OLM(Operator Lifecycle Manager) 作为 Operator Framework 的一部分,可以帮助用户进行 Operator 的自动安装,升级及其生命周期的管理。同时 OLM 自身也是以 Operator 的形式进行安装部署。本文我们将来了解一下 OLM 的基本架构和安装使用。
如何管理越来越多的 operator?OLM 给你答案
|
10月前
|
消息中间件 Linux 数据中心
Docker核心技术:Docker原理之Namespace
通过以上内容,您可以深入了解Docker中的Namespace机制及其在资源隔离中的应用,从而更好地理解和应用Docker技术。
379 25
|
人工智能 搜索推荐 数据挖掘
2024中国CRM排行榜
中国的 CRM 发展经历了从萌芽到快速成长的过程。早期主要依赖手工记录,20 世纪 50 年代商用计算机普及后,CRM 开始发挥作用。90 年代末,CRM 理念引入中国,市场由国外厂商主导。2004 年后,SaaS 模式兴起,但因企业接受度低、成本高而遇到挑战。2008 年,移动互联网推动 CRM 快速发展,2015 年 SaaS CRM 迎来爆发。如今,市场规模不断扩大,预计 2024 年将突破 250 亿元。主要品牌如销售易、Zoho、SAP 和微软 Dynamics 365 等,各具特色,满足不同企业需求。
2024中国CRM排行榜
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
255 1
|
弹性计算 编解码 Kubernetes
什么是云XX产品?提防虚假噱头产品
随着云计算技术的普及,企业和个人用户纷纷选择云产品。然而,市场上存在许多虚假的“云”产品,令人难以辨别。本文介绍了云产品的核心特性,如弹性伸缩、按需付费、高可用性和管理自动化,并提供了如何避免被虚假产品误导的建议。选择知名云服务商、了解核心特性和阅读服务等级协议是关键。
388 3
|
存储 缓存 算法
CPU优化
【10月更文挑战第7天】
503 1
生物合成材料:生物制造的新材料
【10月更文挑战第19天】生物合成材料是利用生物体系中的生物大分子或通过生物转化过程得到的新型材料,具有良好的生物相容性、可降解性和特定的生物活性。本文介绍了其基本原理、制备技术、应用领域及未来发展趋势,涵盖医疗、环保、农业等多个领域,展示了其广阔的应用前景和巨大潜力。
|
编解码 Java Android开发
FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流
RTMP Streamer是一款开源的安卓直播推流框架,支持RTMP、RTSP和SRT协议,适用于各种直播场景。它支持H264、H265、AV1视频编码和AAC、G711、OPUS音频编码。本文档介绍了如何使用Java版的RTMP Streamer,建议使用小海豚版本的Android Studio (Dolphin)。加载项目时,可添加国内仓库加速依赖下载。RTMP Streamer包含五个模块:app、encoder、rtmp、rtplibrary和rtsp。完成加载后,可以在手机上安装并运行APP,提供多种直播方式。开发者可以从《FFmpeg开发实战:从零基础到短视频上线》获取更多信息。
403 7
FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流