天天看點

angularJs select綁定的model 取不到值

<b>内容結構    </b>     

      一.原因分析

      二. 解決辦法 

<b>一.原因分析 </b>       

          1.由于原型繼承的關系,修改父級對象中的somebarevalue會同時修改子對象中的值,但反之則不行。

          2.ng-if 以及 ng-repeat 會建立一個子級作用域,如果在這倆個指令中添加了元素,并增加ng-model指令,那麼ng-model對應的作用域屬于子級作用域,并非controller注入的$scope對應的作用域。

<b>二.解決辦法(推薦使用第一種方式)  </b>     

         1.如果将模型對象的某個屬性設定為字元串,它會通過引用進行共享,是以在子$scope中修改 屬性也會修改父$scope中的這個屬性。下面的例子展示了正确的做法:

 &lt;div ng-controller="somecontroller"&gt;

         {{ somemodel.somevalue }}

         &lt;button ng-click="someaction()"&gt;communicate to child&lt;/button&gt;

         &lt;div ng-controller="childcontroller"&gt;

             &lt;button ng-click="childaction()"&gt;communicate to parent&lt;/button&gt;

         &lt;/div&gt;

&lt;/div&gt;

     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.使用父級作用域                            

&lt;select class="form-control m-b" ng-model="$parent.data"  ng-options="item.id as item.name for item in datas"&gt;

      &lt;option value=""&gt;-- 請選擇 --&lt;/option&gt;

&lt;/select&gt;