问AngularJS，ng-使用条件重复
EN

Stack Overflow用户

提问于 2020-04-09 10:31:43

回答 1查看 194关注 0票数 0

我是AngularJS的新手(2天)。我有这样的代码：

<tr class="factoring-grid__row fixed_row" ng-if="vm.filteredXml.length > 0" ng-class="{disabled: vm.disableMyData(item)}"
  ng-repeat="(index, item) in vm.filteredXml">
  <td>{{item.receptor.razonSocial}}</td>
  <td>{{item.folio}}</td>
  <td style="text-align: center">
    <div class="form-group datetime" style="display: flex">
      <div class="factoring-grid__date-picker">
        <input type="text" autocomplete="off" class="form-control input-sm" uib-datepicker-popup="{{vm.format}}"
          ng-model="vm.filteredXml[index].fechaVencimiento" is-open="vm.datePickerList[index].isOpen"
          datepicker-options="vm.dateOptions" current-text="Hoy" close-text="Cerrar" clear-text="Reset"
          alt-input-formats="vm.altInputFormats" popup-placement="top-right" style="width: 100%;" />
      </div>
      <span ng-click="vm.openDatePicker(index)" class="calendar-icon"></span>
    </div>
  </td>
  <td>
    <span>{{item.montoTotal | filterPesoChile}}</span>
  </td>
</tr>

我需要过滤数据，我的意思是，这些item有一个名为item.status的属性，所以我需要避免呈现为item.status === 'deleted'. Should I filter right here that condition? or should I filter the data that use this ng-repeat (vm.filteredXml`的项目。

我不习惯使用angularjs指令。在reactjs中，我只是简单地映射或过滤数据数组并返回每个数组，但不知道如何使用ng-repeat

angularjs

回答 1

Stack Overflow用户

发布于 2020-04-10 18:28:48

以下是使用指令和具有可选状态的专用筛选器(缺省值为disabled)的示例片段

指令模板是嵌入的，因为我不能在StackOverflow代码段中添加外部文件。

(function () {
    'use strict';

    angular.module('app', []);

    angular
        .module('app')
        .directive('items', function () {
            return {
                restrict: 'EAC',
                scope: {},
                template: '<ul><li ng-repeat="item in vm.items|excludedItemsFilter:\'disabled\'">{{item.label}}</li></ul>',
                link: link,
                controller: controller,
                controllerAs: 'vm'
            };

            function link(scope, element, attrs) {

                scope.$on('$destroy', function () {
                    // destroy events binded to $rootScope, 
                    // cancel $interval and $timeout timers
                });
            }

            function controller($scope) {
                var vm = this;

                vm.items = [
                    {label: "Item 1", status: "enabled"},
                    {label: "Item 2", status: "enabled"},
                    {label: "Item 3", status: "disabled"},
                    {label: "Item 4", status: "enabled"},
                    {label: "Item 5", status: "disabled"}
                ];
            }
        });

    angular
        .module('app')
        .filter('excludedItemsFilter', function () {
            return function (items, excludedStatus) {
                excludedStatus = excludedStatus || 'disabled'; // default value
                return items.filter(function (item) {
                    return item
                        && item.status !== excludedStatus;
                });
            }
        });

})();

<!DOCTYPE html>

<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="module.js"></script>
  </head>

  <body>
    <div items></div>
  </body>
</html>

您还可以删除指令中的专用筛选器和筛选器项，如下所示：

angular.module("app").directive("items", function () {
  return {
    restrict: "EAC",
    scope: {},
    template: '<ul><li ng-repeat="item in vm.items">{{item.label}}</li></ul>',
    link: link,
    controller: controller,
    controllerAs: "vm",
  };

  function link(scope, element, attrs) {
    scope.$on("$destroy", function () {
      // destroy events binded to $rootScope,
      // cancel $interval and $timeout timers
    });
  }

  function controller($scope) {
    var vm = this;

    vm.items = [
      { label: "Item 1", status: "enabled" },
      { label: "Item 2", status: "enabled" },
      { label: "Item 3", status: "disabled" },
      { label: "Item 4", status: "enabled" },
      { label: "Item 5", status: "disabled" },
    ].filter(function (item) {
      return item && item.status !== "disabled";
    });
  }
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61113041

复制

相似问题

问AngularJS，ng-使用条件重复
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS，ng-使用条件重复EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS，ng-使用条件重复
EN