Question

想象一个范围变量，它被读取并且确实发生变化：total_number。我希望total_number<=10构建相同数量的div，或者10< total_number<=20构建相同数量的div。我想我必须使用一个指令，但我不知道如何定义不同数量的div ...我可以使用链接，我该怎么写？

Answer 1

directive做了一个例子，希望它适合你。有任何问题让我知道。

＆＃13;

angular.module('app', [])
  .controller('appCtrl', function($scope, $filter) {
    $scope.total_number = 10;
  })
  .directive('divBuilder', function() {
    return {
      restrict: 'EA',
      scope: {
        count: '@'
      },
      link: function(scope, element, attrs) {
        var count = Number(scope.count);
        if (!count || count <= 0) {
          return false;
        }
        if (count > 10 && count <= 20) {
          count = Math.floor(count / 2);
        }
        var div = '';
        for (var i = 0; i < count; i++) {
          div += '<div class="line">' + (i + 1) + '</div>';
        }

        element.append(div);
      }
    };
  });

＆＃13;

div.line {
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 2px 10px;
}

＆＃13;

<html>

<head>
  <title>Single Demo</title>
  <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
  <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>
  <script src="app.js"></script>

</head>

<body ng-app="app" ng-controller="appCtrl">
  <div-builder count="{{total_number}}"></div-builder>
</body>

</html>

＆＃13;

使用Angular添加自定义div数

1 个答案: