1

以下は非常に単純な例です: 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フォームを持っています:

  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 の例では、新しい色を追加するユーザーをシミュレートしようとしています。「$parent」を持つには、AvailableColors の ng-model が必要です。これは ng-include から来ており、「$parent」がないため、選択された選択はフォームの送信時にスコープ外になります。

私の問題は、ユーザーが追加したときに、新しく追加された色を AvailableColors.html にプッシュできないことです。

何か案は？

1 つのメモ: JsFiddle で新しい色「青」が追加されていることは知っていますが、それは実際にはその例に ng-include がないためです。

明らかに、実際に ng-include がある場合、ページを更新するまでは表示されません。

4

2 に答える 2

1

親は子からのみ読み取られます。必要なことを行うには、親コントローラーのようなメソッドを使用する必要があります。

    $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>

ご覧のとおり、選択に ng-click を追加して、親を更新しました。

于 2013-03-20T01:06:34.857 に答える
0

$scope でオブジェクトへの参照を使用する場合 ( 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 }}

ng-include を使用するPlunker 。

于 2013-03-21T16:21:02.480 に答える