Angularjs指令 - 按键过滤

时间:2015-12-22 11:40:06

标签: angularjs json angularjs-directive

我刚创建了一个指令,以便我能够在我的应用中重复使用某些代码,但现在我有点卡住了..

我有一个指令,用于从json文件中检查另一个对象内的对象:

{
    "data" : [ {
            "iID" : 1,
            "iType" : 5,
            "objTimer" : [{
                    "iDay" : 0,
                    "iTm" : 0,
                    "fSP" : 9
                }, {
                    "iDay" : 0,
                    "iTm" : 3600,
                    "fSP" : 22
                },{
                    "iDay" : 1,
                    "iTm" : 63000,
                    "fSP" : 9
                }, {
                    "iDay" : 1,
                    "iTm" : 76500,
                    "fSP" : 28
                }, {
                    "iDay" : 2,
                    "iTm" : 63000,
                    "fSP" : 9
                } ......
            ],
            .....
        } ]
}

并将其打印在屏幕上,这是代码:

<li ng-repeat="timers in currentRoom.objTimer">
    <example-directive 
        timer="timers" 
        day="'{{timers.iDay}}'" 
        title="'Title'">
    </example-directive>
</li>

我的directive.js代码如下:

angular.module('app.exampleDirective', [])
    .directive('exampleDirective', function () {
        return {
            restrict: 'E',
            scope: {
                timer: '=',
                day: '@',
                title: '='
            },
            replace: true,
            templateUrl: "/templates/directiveTemplate/exampleDirective.html",
            controller: function ($scope) {
                console.log($scope.timer)
            }
        };
    })

和指令模板:

<div>
    {{title}} - {{day}}
    <pre>{{timer}}</pre>
</div>

一切都按预期工作,但我不知道过滤数据的最佳方法是什么。

我的指令在页面上的结果如下(我暂时将值打印为JSON):

<div class="scroll">
  <!-- ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
       <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
          Title - '0'
          <pre class="ng-binding">{"iDay":0,"iTm":0,"fSP":9}</pre>
        </div>
    </li>
  <!-- end ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
       <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
          Title - '0'
          <pre class="ng-binding">{"iDay":0,"iTm":3600,"fSP":22}</pre>
       </div>
    </li>
   <!-- end ngRepeat: timers in currentRoom.objTimer -->
    <li ng-repeat="timers in currentRoom.objTimer" class="">
        <div timer="timers" day="'0'" title="'Title'" class="ng-binding">
           Title - '0'
           <pre class="ng-binding">{"iDay":0,"iTm":16200,"fSP":9}</pre>
        </div>
    </li>
    <!-- end ngRepeat: timers in currentRoom.objTimer -->

依旧......

我想做的基本上是将它们分成块,以便iDay = 0的所有内容都将作为唯一的块打印。

非常类似于以下内容:

天:

 Day-0:    
   - ..    
   - ..    
   - ..
_____________________________________
 Day-1:
   - ..    
   - ..    
   - ..    
_____________________________________
  Day-2:
   - ..
   - ..

但使用相同的指令。

关于如何做到这一点的任何想法?

我尝试在指令中添加一个数据属性日,但现在我被卡住了...我应该将它作为指令模板中的另一个转发器使用并通过@index过滤数据吗?

如果您需要更多详细信息,请发表评论。

0 个答案:

没有答案