AngularJs -使用$parent ng-model从控制器更改/推送选择颜色

AngularJs - Change/Push select color from controller with a $parent ng-model

本文关键字：颜色 选择 控制器 使用 parent ng-model AngularJs      更新时间：2023-09-26

下面是一个非常简单的例子: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;

}

我有三个html表单:

  1. MainForm.Html
  2. AvailableColors.html(部分，用ng-include嵌入MainForm.html)
  3. 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-model有'$parent。'，因为它来自于ng-include，并且没有'$parent'，所以所选择的内容将不在表单提交的范围内。

我的问题是当用户添加新添加的颜色时，我无法将其推送到AvailableColors.html。

任何想法?

注意:我知道在JsFiddle中添加了新的颜色"蓝色"，但那是因为在那个例子中确实没有ng-include。

显然，当实际存在ng-include时，它不会出现，除非刷新页面。

父节点只能从子节点读取。要做你想做的，你必须使用父控制器中的方法。

    $scope.setSelected = function(color) {
        $scope.selectedColor = color;
    }
    $scope.addColor = function(newColor) {
       $scope.colors.push(newColor);
    }

然后，你可以使用像你的html:

一样的输入
//Selector
<select ng-click="setSelected(selectColor)" ng-model="selectColor" ng-options="color.name for color in colors">
  <option value="" selected>Select Color ..</option>
</select>
//Add control
<input type="text" ng-model="newColor.name" />
<button id="addBtn" ng-click="addColor(newColor)">Add</button>

可以看到，我在select中添加了一个ng-click来更新父元素

如果你在$作用域中使用引用对象(这是Angular团队推荐的)，你就不需要在任何地方使用$parent:

$scope.model = {selectedColor: ''};  // use an object here
$scope.addColor = function(newColorName) {
  $scope.colors.push({name: newColorName});
};

AvailableColors.html: 

<select ng-model="model.selectedColor" ng-options="color.name for color in colors">
   <option value="" selected>Select Color ..</option>  
</select>
<br>
<input type="text" ng-model="colorName">
<button ng-click="addColor(colorName); colorName=''">Add</button>
<br />
value is {{ model.selectedColor }}
相关文章：