AngularJS在ng-repeat中使用指令

I have a directive which I am unable to use inside an ng-repeat block.

我有一个指令,我无法在ng-repeat块中使用。

Here is my directive:

这是我的指示:

ap.directive('pastDate', function() {
    return {        
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$validators.pastDate = function(modelValue) { // 'pastDate' is the name of your custom validator ...
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                return (new Date(modelValue) > today);
            }
        }
    };
});

Here is the HTML

这是HTML

<ul id="todo-list">
            <li ng-repeat="x in todo">               
                <ng-form name="repeatForm">
                    <button ng-click="open()">{{x.doc._id}}</button>
                    <label class="label label-info">{{x.doc.Name}}</label>
                    <span>{{x.doc.Address1}}</span>
                    <span>{{x.doc.Address2}}</span>
                    <span name="expDt" pastDate>Expiry Date: {{x.doc.IssueDtto}}</span>
                    <span class="help-block" ng-show="repeatForm.expDt.$error.pastDate">Valid Date Required</span>
                </ng-form>
           </li>

(My requirement is whenever x.doc.IssueDtto is less than current date, I want to highlight it)

(我的要求是每当x.doc.IssueDtto小于当前日期时,我想突出显示它)

Many thanks!

1 个解决方案

#1

I would do something like this:

我会做这样的事情:

Markup:

<div ng-app="myApp">
  <ul id="todo-list" ng-controller="Ctrl">
      <li ng-repeat="x in todo">               
          <ng-form name="repeatForm" highlight="">
              <button ng-click="open()">{{x.doc._id}}</button>
              <label class="label label-info">{{x.doc.Name}}</label>
              <span>{{x.doc.Address1}}</span>
              <span>{{x.doc.Address2}}</span>
              <span name="expDt" past-date="">Expiry Date: {{x.doc.IssueDtto}}</span>
              <span class="help-block" ng-show="repeatForm.expDt.$error.pastDate">Valid Date Required</span>
          </ng-form>
      </li>
  </ul>
</div>

Angular:

var app = angular.module("myApp", []);

app.controller("Ctrl", function($scope) {
    $scope.todo = [
      {
        doc: { 
          _id: 1, 
          Name: 'Buy Food', 
          Address1: 'my address1',
          IssueDtto: '2015-06-22'
        } 
      },
      {
        doc: {
          _id: 2, 
          Name: 'Work', 
          Address1: 'my address2',
          IssueDtto: '2015-06-23'
        } 
      }
    ];
});

app.directive('highlight', function() {
    return {
        restrict: 'A',
        link: function (scope, element) {
          var today = new Date();
          today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
          var issueDate = new Date(scope.x.doc.IssueDtto);
          if(today > issueDate) {
            element.addClass('highlight');
          }
        }
    };
});

Codepen: http://codepen.io/anon/pen/rVYebZ?editors=101

Right now the application highlight the whole line, you can highlight other element if you want.

现在应用程序突出显示整行,您可以根据需要突出显示其他元素。

#1