Angular JS: How to dynamicall add innerHTML of div tag

Question

I am rephrasing my question here: I have to dynamically append radio buttons into the existing list of radio buttons. How can I do it thru Angular JS?

Answer 1

Create your radio buttons using ng-repeat. You must note that since ng-repeat create a child scope for each item, you need to use a nested property for your ng-model (in this example, result.selectedColor works, but selectedColor wouldn't.

If you really don't want to use a nested property, your alternative would be to use $parent.selectedColor. I think the nested property is a better choice.

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

Then just add this in your controller :

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

Working example : Plunker

Answer 2

Actually using 'push' we can add an item into the existing list. And angular binding will automatically update the radio buttons list.

And if we need to delete an item, we can use 'splice'.