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 ?

ng-repeat is what you should be aiming for, but it's unclear what exactly you are trying. — Nidhin Joseph
– Nidhin Joseph, Commented Oct 1, 2019 at 5:46
the output on the ui will be a label and below is a dropdown binded with values that I retrieve from an angular service call. So basically I would have in the case above a collection of 6 items in a parent div . hope that's a bit clearer — Mel
– Mel, Commented Oct 1, 2019 at 5:56
so kind of like a list where when you click each list item, it makes a service request and loads child? — Nidhin Joseph
– Nidhin Joseph, Commented Oct 1, 2019 at 5:57

Nidhin Joseph · Accepted Answer · 2019-10-01 10:28:55Z

2

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>

edited Oct 1, 2019 at 10:28

answered Oct 1, 2019 at 6:11

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mel Over a year ago

Hi , I have looked at the code above. Sorry bit new to this. So what I have done is push my objects as you mentioned above to a list as the user selects a value. $scope.mappingList.push({ SObject: $scope.selected, sObjectFields: $scope.sColumnsList }); Now this gives me a list of the Sobject the selected value and SObjectFields as an array of values. What im having a bit of an issue with is the html required that will bind this to the ui, keeping in mind that the SObjectFields is a checkboxlist. thankyou

Nidhin Joseph Over a year ago

yep, same logic, you can bind the checkbox using ng-checked. The only thing to keep in mind is to provide a unique id for the label to work. I have updated the answer, please check

Nidhin Joseph Over a year ago

update: you can use ng-checked for one way binding, and ng-model for two-way binding the checkbox value. Check the post as I also display the JSON result and not the change when you check a checkbox.

Abhishek Tiwari · Accepted Answer · 2019-10-01 05:55:36Z

0

You can easily bind the html using ng-html-bind

<p ng-bind-html="myText"></p>

where $scope.myText = <....some html text..>

This thing you can use inside ng-repeat

answered Oct 1, 2019 at 5:55

Abhishek Tiwari

1437 bronze badges

Comments

jigar kataria · Accepted Answer · 2019-10-01 08:00:30Z

0

You can use ng-repeat which is available in angularjs. Which is used for looping array of objects and can be printed in html.

<h1 ng-repeat="x in records">{{x}}</h1>

Here records is an array of object and x is a single object which is getting displayed. You can also acess keys of x using dot notations like x.name etc.

answered Oct 1, 2019 at 8:00

jigar kataria

73 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related