app.js

Question

我正在创建一个数据表单，其中一部分要求它有一个按钮来添加另一行问题，另一个按钮用于删除相应的行。希望我只是忽略了一些东西，这是一个简单的修复，但如果我必须重新组织任何代码，我会。我遇到的问题是，当你单击Add Stack时，它会添加一行与它应该完全相同的新问题，但当你单击Delete Stack时，没有任何反应。从各种调试方法我发现问题源于生成删除按钮这一事实，如果我要将最初加载的行添加到页面中，它就像它应该的那样工作。我还想指出，出于调试的目的，删除按钮只是将“test”打印到控制台而不是实际删除一行。

app.js

/*global angular*/

var app;
app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';

    $routeProvider.when('/', {
        templateUrl: 'html/home.html'
    }).otherwise({
        redirectTo: '/'
    });

}]);

app.controller('MainController', function ($scope, $http) {
    'use strict';

    $http.get('json/data.json').then(function (response) {
        $scope.data = response.data;
    });

    $scope.change = function (item) {
        return item + '-changed';
    };
});

app.directive('removeStackButton', function() {
    return {
        link: function(scope, element) {
            scope.removeStack = function() {
                console.log("test");
            }
        }
    }
});

app.directive('addStackButton', ['$http', function($http) {
    return {
        link: function(scope, element) {
            scope.addStack = function() {
                $http.get('html/stack.html').then(function (response) {
                    var row = $compile(response.data)(scope);
                    element.parent().parent().prepend(row);
                });
            }
        }
    }
}]);

<小时/>

stack.html

<div class="form-group">
    <div class="form-group">
        <div class="row">
            <div class="col-xs-4">
                <label for="stacks_totes">Totes:</label>
                <select name="stacks_totes[]" class="form-control">
                    <option value="0" selected="selected">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
            </div>
            <div class="col-xs-4">
                <label for="capped_stack">Cap:</label>
                <select name="capped_stack[]" class="form-control">
                    <option value="0" selected="selected">No cap</option>
                    <option value="1">Cap w/o litter</option>
                    <option value="2">Cap w/ litter</option>
                </select>
            </div>
            <div class="col-xs-4">
                <label for="cap_height">Cap height:</label>
                <select name="cap_height[]" class="form-control">
                    <option value="0" selected="selected">(No cap)</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-xs-12">
                <button class="btn btn-danger btn-block btn-sm ng-scope" remove-stack-button ng-click="removeStack()">Delete Stack</button>
            </div>
        </div>
    </div>
    <hr/>
</div>

<小时/>

home.html的

<div>
    <form>
        <fieldset>
            <legend>Stacks</legend>
            <div class="form-group">
                <div class="form-group">
                    <button class="btn btn-block" add-stack-button ng-click="addStack()">Add Stack</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<小时/>

的index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="vendor/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="vendor/jquery-2.1.4/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="vendor/angular-1.4.4/angular.min.js"></script>
    <script type="text/javascript" src="vendor/angular-1.4.4/angular-route.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>


<body ng-controller="MainController">

    <ng-include src="'html/navbar.html'"></ng-include>
    <ng-view></ng-view>
</body>

Answer 1

要解决您对ng-repeat的评论，您应该创建一个模型并解决它而不是DOM。把你的stackForm扔进一个指令。见plunker例如：

app.controller('MainCtrl', function ($scope, $http) {
    // The stackList is your model. Work off this list instead.
    $scope.stackList = [];

    $scope.addStack = function() {
      $scope.stackList.push({});
    };

    $scope.removeStack = function(stack) {
      var stackIdx = $scope.stackList.indexOf(stack);
      if (stackIdx > -1) {
        $scope.stackList.splice(stackIdx, 1);
      }
    };
});

在你的标记中：

  <button class="btn btn-block" ng-click="addStack()">Add Stack</button>
  ...
  <div data-ng-repeat="stack in stackList track by $index">
    <div data-stack="stack" data-remove-stack="removeStack(stack)"></div>
  </div>

AngularJS - 从另一个指令

app.js

stack.html

home.html的

的index.html

1 个答案: