Как я могу повторить HTML для списка объектов в AngularJS? - PullRequest
Новая
       19

Как я могу повторить HTML для списка объектов в AngularJS?

1 голос
/ 01 октября 2019

У меня есть список объектов в angularjs, и с этим я заполняю некоторый html следующим образом, у меня есть список с элементами, например, текст будет отображаться в списке как 

Item1
Item2
Item3

Теперь, когда пользовательвыбирает один из этих я привязываю данные к элементам управления на странице ниже, но если они выбирают другой, то он привязывается к элементу управления, и первые данные пользовательского интерфейса выбора больше не отображаются. 

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

Запрос некоторых указанийЧто касается того, что было бы лучшим способом воспроизвести это на странице таким образом, чтобы при выборе одного из них он каким-то образом добавлялся в контейнер и отображался на экране, что-то вроде добавления HTML. Также, если пользователь решит удалить значение из списка выше, скажем, Item3, он будет удален из контейнера html. Будет ли работать ng-repeat или потребуется директива для создания динамического HTML каждый раз, когда пользователь выбирает?

Ответы [ 3 ]

2 голосов
/ 01 октября 2019

Сначала необходимо объявить структуру JSON, которую можно повторить, используя ng-repeat. После этого вы можете использовать $index для ng-repeat, чтобы получить доступ к индексу каждого элемента и выдвинуть объект сопоставления.

При двусторонней привязке все должно отображаться на экране, как только вы нажимаете на элемент. 

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





  
    {{ item.name }}
     0" ng-repeat="mapping in item.mappings">
      
        
        
      
    
  

  {{list | json}}
0 голосов
/ 01 октября 2019

Вы можете использовать ng-repeat, который доступен в angularjs. Который используется для зацикливания массива объектов и может быть напечатан в формате html. 

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

Здесь records - это массив объектов, а x - это один объект, который отображается. Вы также можете использовать клавиши x, используя точечные обозначения, такие как x.name и т. Д.

0 голосов
/ 01 октября 2019

Вы можете легко связать HTML, используя ng-html-bind

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

, где $scope.myText = <....some html text..>

Эту вещь, которую вы можете использовать внутри ng-repeat

...