How can i repeat html for a list of objects in AngularJS?

Question

I have a list of objects in angularjs and with that I populate some html as follows I have a list with items for example the text would be displayed in the list like

Item1
Item2
Item3

Now when a user selects one of these I bind data to the below controls on the page, but if they select another then it bind to the control and the first selections ui data is no longer displayed.

<div class="form-group" >
    <label for="sEntity" class="col-md-3 control-label">S-Entity</label>
    <div class="col-md-9">
        <div id="sEntity" options="sList" ng-model=selected ng-bind="selectedValue"></div>
    </div>
</div>
<div class="form-group">
    <label for="sColumns" class="col-md-3 control-label">Mappings</label>
    <div class="col-md-9">
        <div id="sColumns" options="sColumnsList"
             selected-model="sColumnsLookup" checkboxes="true"></div>
    </div>
</div>              

Asking for some guidance as to what would be the best way to didplay this on the page such that when they select one it somehow add to a container and displays on the screen, sort of like appending html. Also if the user decides to delete a value from the list above , lets say Item3, then it will delete from the container of html . Would ng-repeat work or would a directive be required to create dynamic html everytime a user selects ?

Answer 1

You need to first declare a JSON structure that can be iterated using ng-repeat. After that, you can use the $index for ng-repeat to access the index of each item and push your mapping object.

With two-way binding, things should show on screen as soon as you push the item.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.list = [{
    name: 'Item 1',
    mappings: []
  }, {
    name: 'Item 2',
    mappings: []
  }, {
    name: 'Item 3',
    mappings: []
  }];

  $scope.addMapping = index => {
    // this is where your service call goes
    $scope.list[index].mappings.push({
      name: `Mapping ${index + 1}.1`,
      id: new Date().getTime(),
      selected: true
    }, {
      name: `Mapping ${index + 1}.2`,
      id: new Date().getTime(),
      selected: false
    })
  };
});

.entity {
  background: #ccc;
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">

  <div class="form-group entity" ng-repeat="item in list">
    <div ng-click="addMapping($index)">{{ item.name }}</div>
    <div class="form-group" ng-show="item.mappings.length > 0" ng-repeat="mapping in item.mappings">
      <div class="">
        <label for="{{$index}}_{{mapping.id}}">{{ mapping.name }}</label>
        <input type="checkbox" id="{{$index}}_{{mapping.id}}" ng-model="mapping.selected"/>
      </div>
    </div>
  </div>

  <pre>{{list | json}}</pre>
</div>