以angularjs方式使用ng-repeat进行格式化

时间:2014-04-08 05:39:34

标签: jquery angularjs ng-repeat

<div id="container">
        <div ng-repeat="itm in items" class="item">
            <div>
                <span>{{itm.name}}</span>
                <ul>
                    <li ng-repeat="i in itm.grouped">
                       <span>{{i.spName}}</span> 
                    </li>
                </ul>
            </div>
        </div>
    </div>

查看已编译并附加到jqueryui选项卡的源代码如此

<html><body>
 <div id="innerPageContent" ng-show='UI.showTabs'>
        <div id="tabs" tabs>
            <ul id="tabs_ul">
            </ul>
        </div>
    </div></body></html>

在控制器中调用

  $scope.$watch("items", function (newValue, oldValue, scope) { 
        $("#container").gridalicious({
            width: 250
        });
    });

脚本完成功能运行但似乎没有任何改变 它找不到动态内容?

1 个答案:

答案 0 :(得分:0)

尝试:

App.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
        if (scope.$last)
            setTimeout(function() {
                scope.$emit('onRepeatLast', element, attrs);
            }, 1);
    };
});
App.controller('someController', function($scope) {
    $scope.$on('onRepeatLast', function(scope, element, attrs) {
        $("#container").gridalicious({
            selector: ".item"
        });
    });
};

AND在HTML中:

<div id="container">
    <div ng-repeat="itm in items" class="item" on-last-repeat>
         <div>
           <span>{{itm.name}}</span>
             <ul>
               <li ng-repeat="i in itm.grouped" >
                      <span>{{i.spName}}</span> 
                 </li>
         </ul>
          </div>
     </div>
</div>

这在我的项目中对我有用,基本上你需要在所有元素都被渲染时调用 $(&#34;#container&#34;)。gridalicious()