angularjs - Angular JS: div タグの innerHTML を動的に追加する方法

Question

ここで質問を言い換えます。ラジオ ボタンを既存のラジオ ボタンのリストに動的に追加する必要があります。Angular JSを介してどのように行うことができますか?

Answer 1

ng-repeat を使用してラジオ ボタンを作成します。ng-repeat はアイテムごとに子スコープを作成するため、ng-model にネストされたプロパティを使用する必要があることに注意する必要があります (この例では、result.selectedColor は機能しますが、selectedColor は機能しません。

ネストされたプロパティを本当に使用したくない場合は、代わりに $parent.selectedColor を使用することもできます。ネストされたプロパティの方が良い選択だと思います。

<form name="myForm">
  <div ng-repeat="color in colors">
    <input type="radio" ng-model="result.selectedColor" value="{{color.value}}">  {{color.name}} <br/>
  </div>  
  <tt>color = {{result.selectedColor}}</tt><br/>
</form>

次に、これをコントローラーに追加するだけです：

$scope.result = {};
$scope.colors = [
   {name:'red', value:'red'}, 
   {name:'blue', value:'blue'}, 
   {name:'green', value:'green'}
];

施工例：プランカー

Answer 2

実際に「プッシュ」を使用して、既存のリストに項目を追加できます。また、angular バインディングは、ラジオ ボタン リストを自動的に更新します。

また、アイテムを削除する必要がある場合は、'splice' を使用できます。