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

Question

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

Item1

Item2

Item3

现在，当用户选择其中一个时，我会将数据绑定到页面上的以下控件，但是如果他们选择另一个控件，则它会绑定到该控件，并且不再显示第一个选择的 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>              

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

Answer 1

您需要首先声明一个可以使用ng-repeat. 之后，您可以使用$indexforng-repeat访问每个项目的索引并推送您的映射对象。使用双向绑定，只要您按下项目，内容就会立即显示在屏幕上。var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {&nbsp; $scope.list = [{&nbsp; &nbsp; name: 'Item 1',&nbsp; &nbsp; mappings: []&nbsp; }, {&nbsp; &nbsp; name: 'Item 2',&nbsp; &nbsp; mappings: []&nbsp; }, {&nbsp; &nbsp; name: 'Item 3',&nbsp; &nbsp; mappings: []&nbsp; }];&nbsp; $scope.addMapping = index => {&nbsp; &nbsp; // this is where your service call goes&nbsp; &nbsp; $scope.list[index].mappings.push({&nbsp; &nbsp; &nbsp; name: `Mapping ${index + 1}.1`,&nbsp; &nbsp; &nbsp; id: new Date().getTime(),&nbsp; &nbsp; &nbsp; selected: true&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; name: `Mapping ${index + 1}.2`,&nbsp; &nbsp; &nbsp; id: new Date().getTime(),&nbsp; &nbsp; &nbsp; selected: false&nbsp; &nbsp; })&nbsp; };});.entity {&nbsp; background: #ccc;&nbsp; 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">&nbsp; <div class="form-group entity" ng-repeat="item in list">&nbsp; &nbsp; <div ng-click="addMapping($index)">{{ item.name }}</div>&nbsp; &nbsp; <div class="form-group" ng-show="item.mappings.length > 0" ng-repeat="mapping in item.mappings">&nbsp; &nbsp; &nbsp; <div class="">&nbsp; &nbsp; &nbsp; &nbsp; <label for="{{$index}}_{{mapping.id}}">{{ mapping.name }}</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="{{$index}}_{{mapping.id}}" ng-model="mapping.selected"/>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <pre>{{list | json}}</pre></div>

Answer 2

您可以使用 angularjs 中提供的 ng-repeat。用于循环对象数组，可以打印在 html 中。<h1&nbsp;ng-repeat="x&nbsp;in&nbsp;records">{{x}}</h1>这里的记录是一个对象数组，x 是一个正在显示的对象。您还可以使用点符号（如 x.name 等）访问 x 的键。

Answer 3

您可以使用 ng-html-bind 轻松绑定 html<p ng-bind-html="myText"></p>在哪里&nbsp;$scope.myText = <....some html text..>你可以在 ng-repeat 中使用这个东西