Question

我写过以下HTML＆amp; AngularJS代码，用于在单击按钮上更新HTML页面上的树（视图）。

单击按钮时，更改会显示一小段时间并消失。我无法找到原因。能告诉我如何克服这个问题吗？

下面是HTML和JS代码。这可以在Snippet Editor中使用，但不能在浏览器中使用。

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
  $scope.categories = [];


  $scope.$apply($scope.addTreeToView = function() {

    $scope.categories = [{
      title: 'Computers1',
      categories: [{
        title: 'Laptops1',
        categories: [{
          title: 'Ultrabooks1'
        }, {
          title: 'Macbooks1'
        }]
      }, {
        title: 'Desktops1'
      }, {
        title: 'Tablets1',
        categories: [{
          title: 'Apple1'
        }, {
          title: 'Android1'
        }]
      }]
    }, {
      title: 'Printers1',
      categories: [{
        title: 'HP1'
      }, {
        title: 'IBM1'
      }]
    }];



  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Tree Example</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
  <div ng-app="myapp">
    <div class="col-sm-10 col-sm-offset-1" ng-controller="TreeCtrl">

      <form action="#" method="post" class="form-horizontal" id="commentForm" role="form">
        <div class="form-group" id="div_submitComment">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-success btn-circle text-uppercase" type="submit" ng-click="addTreeToView()"><span class="glyphicon glyphicon-send" id="qazwsx"></span> Create Tree</button>
          </div>
        </div>
      </form>

      <div class="page-header">
        <h3 class="reviews">Tree</h3>
      </div>

      <script type="text/ng-template" id="categoryTree">
        {{ category.title }}
        <ul ng-if="category.categories">
          <li ng-repeat="category in category.categories" ng-include="'categoryTree'">
          </li>
        </ul>
      </script>

      <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
      </ul>


    </div>
  </div>
  <script src="self.js"></script>
</body>

Answer 1

尝试从buttom

中删除type =“submit”

Answer 2

我使用的是Boot元素的Form元素类型。这有一个action属性。我删除了action属性。删除后代码正常工作

＆＃13;

       < form method = "post"
      class = "form-horizontal"
      id = "commentForm"
      role = "form" >
        < div class = "form-group"
      id = "div_submitComment" >
        < div class = "col-sm-offset-2 col-sm-10" >
        < button class = "btn btn-success btn-circle text-uppercase"
      type = "submit"
      ng - click = "addTreeToView()" > < span class = "glyphicon glyphicon-send"
      id = "qazwsx" > < /span> Create Tree</button >
        < /div>
        </div >
        < /form>

＆＃13;

Answer 3

因为您的html将在您执行＆＃34;提交＆＃34;之后重新加载。所以你必须替换＆＃34;输入=＆＃34;提交＆＃34;按type =＆＃34;按钮＆＃34;并禁用＆＃34;自动提交＆＃34;。

Angularjs查看未更新，查看按钮上的闪烁点击

3 个答案: