這裏是一個非常簡單的例子: JsFiddle
這裏是MainCtrl
function MainCtrl($scope)
{
$scope.color = {};
$scope.colors = [
{ name: "red" },
{ name: "yellow" },
];
var newColor = $scope.color;
newColor.name = "blue";
$scope.colors.push(newColor);
$scope.selectedColor = newColor;
}
我有3個html格式:
- Mai nForm.Html
- AvailableColors.html(部分,上MainForm.html包埋與NG-包括)
- AddNewColor.html
MainForm.Html看起來像這樣:
<div ng-app ng-controller="MainCtrl">
<div ng-include="'AvailableColors.html'">
</div>
AvailableColors.html看起來像這樣:
<select ng-model="$parent.selectedColor" ng-options="color.name for color in colors">
<option value="" selected>Select Color ..</option>
</select>
<a href="#">Add New Color</a>
<br />
value is {{ selectedColor }}
在JsFiddle示例中,我試圖模擬用戶添加新顏色。我需要AvailableColors的ng模型有'$ parent'。因爲它來自ng-include,並且不包含'$ parent',所以選擇的選項將不在表單提交的範圍內。
我的問題是,當用戶添加它們時,我無法將新添加的顏色推送到AvailableColors.html。
有什麼建議嗎?
一注:我知道在JsFiddle中增加了新的顏色'blue',但那是因爲在那個例子中確實沒有ng-include。
很明顯,當實際上有一個ng-include時,它不會出現,不足以刷新頁面。