Question

我有两个按钮“add”和“delete”，它们会添加组合框以及这两个按钮。

我想要的是以这种方式添加按钮和下拉列表：

情景：

第一个添加按钮---＆gt;创建一对按钮以及下面的组合框它
1A ----＆gt; 1A是第1个添加按钮的子当点击添加----＆gt;创建对按钮和它下面的组合框
1B ----＆gt; 1B是第1个添加按钮的子当点击添加----＆gt;创建对按钮和它下面的组合框
现在当用户点击第一个添加按钮----＆gt;时，它应该创建一个一对按钮以及它下面的组合框但不在下面图1B

和页面上的其他按钮相同，等等..

但是现在它的工作略有不同。

HTML代码：

<html lang="en" ng-app="ui.bootstrap.demo">
    <head>
        <meta charset="UTF-8">
        <title>Text Box</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
        <script src="script.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div id="ctrl-as-exmpl" ng-controller="DatepickerDemoCtrl">
            <drop-down user="users[0]"></drop-down>
        </div>
    </body>
</html>

JS档案：

angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
  .directive('dropDown', function($compile) {
      return {

          restrict: 'E',

          scope: {
            user: '=user'
          },

          controller: function($scope) {

              $scope.addChild = function (child) {
                  var index = $scope.user.children.length;
                  $scope.user.children.push({
                      "parent": $scope.user,
                      "children": [],
                      "index": index
                  });
              }

              $scope.remove = function () {
                  if ($scope.user.parent) {
                    var parent = $scope.user.parent;
                    var index = parent.children.indexOf($scope.user);
                    parent.children.splice(index, 1);
                  }
              }
          },

          templateUrl: 'dropdown.tpl.html',

          link: function ($scope, $element, $attrs) {

          },

          compile: function(tElement, tAttr) {
              var contents = tElement.contents().remove();
              var compiledContents;
              return function(scope, iElement, iAttr) {
                  if(!compiledContents) {
                      compiledContents = $compile(contents);
                  }
                  compiledContents(scope, function(clone, scope) {
                           iElement.append(clone); 
                  });
              };
          }
      };
  });


angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {

    $scope.users = [{
        "parent": null,
        "children": [],
        "index": 0
    }]

    $scope.today = function () {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function () {
        $scope.dt = null;
    };

    // Disable weekend selection
    $scope.disabled = function (date, mode) {
        return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
    };

    $scope.toggleMin = function () {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 2);
    $scope.events =
            [
                {
                    date: tomorrow,
                    status: 'full'
                },
                {
                    date: afterTomorrow,
                    status: 'partially'
                }
            ];

    $scope.getDayClass = function (date, mode) {
        if (mode === 'day') {
            var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

            for (var i = 0; i < $scope.events.length; i++) {
                var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);

                if (dayToCheck === currentDay) {
                    return $scope.events[i].status;
                }
            }
        }

        return '';
    };
});

这是plunker

Answer 1

也许这就是你想要的。

http://embed.plnkr.co/xYmbm69krqZ9KVNnS7zr/

$scope.user.children.unshift({
                      "parent": $scope.user,
                      "children": [],
                      "index": index
                  });

Plunkr Stream：http://plnkr.co/edit/xYmbm69krqZ9KVNnS7zr?p=streamer&s=CXiaSno9MfoIQogk

在角度JS中创建DOM元素

1 个答案: