Question

我在我的应用程序中使用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。但是我想在带有class="ce-second-side"的主div标签中指定 ng-repeat 一次。但我不希望 ng-repeat 应用于输入类型标记。我希望它仅适用于{{notify.employeeName}}。

任何人都可以告诉我们如何仅为{{notify.employeeName}}申请 ng-repeat 而不是输入标签，但我想做 ng-repeat 一次？

Answer 1

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

＆＃13;

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

＆＃13;

Answer 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元素

2 个答案: