我如何为 AngularJS 中的对象列表重复 html？

Question

我在 angularjs 中有一个对象列表，我用它填充了一些 html 如下我有一个包含项目的列表，例如文本将显示在列表中，如

Item1
Item2
Item3

现在，当用户 select 其中一个时，我将数据绑定到页面上的以下控件，但如果他们 select 另一个，则它绑定到控件和第一个 selections ui 数据不再显示。

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

要求一些 gui舞蹈关于什么是在页面上播放此内容的最佳方式，这样当他们 select 以某种方式播放它时添加到容器并显示在屏幕上，有点像附加 html。此外，如果用户决定从上面的列表中删除一个值，比如说 Item3，那么它将从容器中删除 html 的。 ng-repeat 会工作还是指令会 required 以在每次用户 selects 时创建动态 html？

Answer 1

您可以使用 ng-html-bind

轻松绑定 html

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

其中 $scope.myText = <....some html text..>

你可以在 ng-repeat 中使用这个东西

Answer 2

您需要先声明一个可以使用ng-repeat 迭代的JSON 结构。之后，您可以使用 $index for 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;
}

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

Answer 3

您可以使用 angularjs 中提供的 ng-repeat。用于循环对象数组，可以在 html.

中打印

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

这里的 records 是一个对象数组，x 是要显示的单个对象。您还可以使用 x.name 等点符号访问 x 的键

我如何为 AngularJS 中的对象列表重复 html？

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

html

javascript

angularjs

angularjs-ng-repeat