ng-if打包選擇ng-options打破ngModel？

這plunker是從角ngOptions樣本：ng-if打包選擇ng-options打破ngModel？

不過，我添加了一個ngIf到第一select導致：

<div ng-if="1<2"> 
    Color (null not allowed): 
    <select ng-model="myColor" ng-options="color.name for color in colors"></select><br> 
</div>

一些有趣的，你可能會注意到的是，ngIf休息ngModel綁定，當您更改您的選擇時沒有任何反應。

因爲沒有ngIf的代碼會產生預期的結果。

您可以確認這是否是一個角度錯誤，我的代碼和/或是否有解決方法？

來源

2014-10-27 Dalorzo

ng-if創建子範圍。我看不到那個笨蛋......所以完全不知道這是什麼問題。所以你可能會在子作用域中設置'myColor'並試圖在父作用域中訪問它？檢查此http://jsbin.com/namimimaqe/1/edit – PSL 2014-10-27 20:52:02

請閱讀此：http://stackoverflow.com/questions/18128323/angularjs-if-you-are-not-using-a-dot-in-你的模型，你做錯了 – 2014-10-27 20:56:12

這是一個很棒的解釋.. https://github.com/angular/angular.js/wiki/Understanding-Scopes和http://stackoverflow.com/questions/14101099/ng-include-causes-the-controller-block-to-re-render/14104318＃14104318 – PSL 2014-10-27 21:02:47

您可以$父到您的NG選項添加爲NG-如果創建子範圍

請查看下面

var app = angular.module('app', []); 
 

 
app.controller('firstCtrl', function($scope) { 
 
    $scope.colors = [{ 
 
    name: "red" 
 
    }, { 
 
    name: "black" 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="firstCtrl"> 
 

 
    <div ng-if="1<2"> 
 
     Color (null not allowed): 
 
     <select ng-model="myColor" ng-options="color.name for color in $parent.colors"></select> 
 
     <br> 
 
    </div> 
 

 
    </div> 
 
</body>

，或者使用控制器的語法，即：

HTML：

<body ng-app="app"> 
    <div ng-controller="firstCtrl as vm "> 

    <div ng-if="1<2"> 
     Color (null not allowed): 
     <select ng-model="myColor" ng-options="color.name for color in vm.colors"></select> 
     <br> 
    </div> 

    </div> 
</body>

JS 變種應用= angular.module（ '應用'，[]）;

app.controller('firstCtrl', function() { 

    var vm = this; 
    vm.colors = [{ 
    name: "red" 
    }, { 
    name: "black" 
    }] 


});

來源

2014-10-27 20:54:37 sylwester

不，不是'$ parent'，這很糟糕...還有很多其他更好的方法來處理這個問題。 – PSL 2014-10-27 20:56:46

使用ng-if指令爲它內部的DOM創建一個新的作用域。要引用父範圍上的myColor變量，請寫ng-model =「$ parent.myColor」

<div ng-if="1<2"> 
    Color (null not allowed): 
    <select ng-model="$parent.myColor" ng-options="color.name for color in colors"></select><br> 
</div>

來源

2014-10-27 20:55:14 wbeange

ng-if打包選擇ng-options打破ngModel？

回答

相關問題