angular的处理方式

最新推荐文章于 2024-12-05 14:00:14 发布

HD2killers

最新推荐文章于 2024-12-05 14:00:14 发布

阅读量226

点赞数

分类专栏： javascript thinkphp5

本文链接：https://blog.youkuaiyun.com/HD2killers/article/details/81606038

版权

thinkphp5 同时被 2 个专栏收录

49 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <!-- <script src='__STATIC__/js/jquery.min.js' type="text/javascript"></script> -->
    <script src="__STATIC__/js/angular.min.js"></script>
</head>

<body ng-app="mainApp">
    <div ng-controller="cartController">
        <div ng-repeat="vo in cart">
            <span ng-bind="vo.name"></span>
            <em ng-bind="vo.type.item" ng-click="add_cart(this)"></em>
        </div>
        <div>
            <button ng-click="get_data_list()">点击</button>
        </div>
        <input type="" name="" ng-model="num">
    </div>
    <script type="text/javascript">
    </script>
    <script>
    var mainApp = angular.module('mainApp', []);
    mainApp.controller('cartController', function($scope, $http) {
        $scope.cart = [];
        $scope.num = 0;
        $scope.$watch('cart', function(newValue, oldValue) {
            console.log('cart获取');
        });
        $scope.get_data_list = function() {
            console.log('get_data_list');
            $http({
                method: 'POST',
                url: "{:url('ajax_get_list')}",
            }).success(function(data, status) {
                $scope.cart = data.data;
            }).error(function(data, status) {});
        };
        $scope.add_cart = function(e) {
            console.log(e);
            console.log($scope.num);
            // console.log(e.vo.type);
        };
        $scope.get_data_list();
    });
    </script>
</body>

</html>

渲染数据完成之后的操作,添加repeat-finish

<div ng-repeat="vo in listbar" repeat-finish>
       <li class="listbar" data-item="{{vo.parent_id_path}}" data-id="{{vo.id}}">
         <a href="javascript:void(0);" data-id="{{vo.id}}">{{vo.mobile_name}}</a>
       </li>
</div>

mainApp.directive('repeatFinish',function(){
          return {
              link: function(scope,element,attr){
                var item_index = window.localStorage.getItem("item_index");
                  if (scope.vo.id==item_index) { // scope.$index遍历的index,scope.$last == true渲染完成
                      $(".listbar li").eq(scope.$index).addClass('red');
                  }
              }
          }
})