ng-repeat 仅对特定的 div 元素答案

【问题标题】：ng-repeat only to specific div elementsng-repeat 仅对特定的 div 元素
【发布时间】：2018-02-08 19:30:04
【问题描述】：

我在我的应用程序中使用 AngularJS。我正在尝试使用 AngularJS 引导日历显示事件。问题是我无法一次指定 ng-repeat。

这是我的 HTML：

    <div class="ce-second-side">
    <div class="ce-each-time">
    <input type="text" ng-model="range1" ng-click="select(range1)" readonly>
    <span data-ng-repeat="notify in notifiesOnDate" data-ng-
    if="notify.startTime=='12:00 Hrs'">{{notify.employeeName}}</span>
    <input type="text" ng-model="range2" ng-click="select(range2)" readonly>
    <span data-ng-repeat="notify in notifiesOnDate" data-ng-
    if="notify.startTime=='12:30 Hrs'">{{notify.employeeName}}</span>
    </div>
    </div>

如您所见，我为两种输入类型指定了 ng-repeat。但我只想在主 div 标签中用class="ce-second-side" 指定一次ng-repeat。但我不希望 ng-repeat 应用于输入类型标签。我希望它仅适用于{{notify.employeeName}}。

谁能告诉我如何应用 ng-repeat 仅适用于 {{notify.employeeName}} 而不是输入标签，但我想做 ng-repeat 在主 div 标签中只出现一次？

【问题讨论】：

标签： html angularjs

【解决方案1】：

您需要一个groupBy 过滤器。幸运的是 angular.filter 模块有它，所以你只需要导入它的脚本。这是它如何工作的演示：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">


    <div ng-repeat="(key,values) in notifiesOnDate | groupBy:'startTime'">

      <div ng-show="key=='12:00 Hrs'"><input type="text" ng-model="range1" ng-click="select(range1)" readonly></div>
      <div ng-show="key=='12:30 Hrs'"><input type="text" ng-model="range2" ng-click="select(range2)" readonly></div>

      <div ng-repeat="notify in values">
        {{notify.employeeName}}
      </div>

    </div>

  </div>

  <script>
    var app = angular.module('myApp', ['angular.filter']);
    app.controller('myCtrl', function($scope) {
      $scope.range1 = "12:00am - 12:30am";
      $scope.range2 = "12:30am - 01:00am";

      $scope.notifiesOnDate = [
      {"startTime" : "12:00 Hrs", "employeeName" : "AAA"},
      {"startTime" : "12:00 Hrs", "employeeName" : "BBB"},
      {"startTime" : "12:00 Hrs", "employeeName" : "CCC"},
      {"startTime" : "12:30 Hrs", "employeeName" : "111"},
      {"startTime" : "12:30 Hrs", "employeeName" : "222"},
      {"startTime" : "12:30 Hrs", "employeeName" : "333"},
      ];

      $scope.select = function(val) {
        $scope.display = angular.copy(val);
      }
    });
  </script>

</body>

</html>

【讨论】：

【解决方案2】：

试试这个：

<div class="ce-second-side">
   <div class="ce-each-time" data-ng-repeat="notify in notifiesOnDate">
     <input type="text" ng-model="range1" ng-click="select(range1)" readonly>
     <span data-ng-if="notify.startTime=='12:00 Hrs'">{{notify.employeeName}}</span>
     <input type="text" ng-model="range2" ng-click="select(range2)" readonly>
     <span data-ng-if="notify.startTime=='12:30 Hrs'">{{notify.employeeName}}</span>
   </div>
</div>

【讨论】：

我不想将 ng repeat 应用于输入标签，但在您的代码中，您同时包含了输入标签和跨度。
您可以将它们从 div 中取出。