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

Question

我在 angularjs 中有一个对象列表，然后我填充了一些 html，如下所示我有一个包含项目的列表，例如文本将显示在列表中Item1Item2Item3现在，当用户选择其中一个时，我会将数据绑定到页面上的以下控件，但是如果他们选择另一个控件，则它会绑定到该控件，并且不再显示第一个选择的 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) {

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

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

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

这里的记录是一个对象数组，x 是一个正在显示的对象。您还可以使用点符号（如 x.name 等）访问 x 的键。

Answer 3

您可以使用 ng-html-bind 轻松绑定 html

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

在哪里 $scope.myText = <....some html text..>

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