使用 Angular 清除 HTML 内容答案

【问题标题】：Clearing HTML content with Angular使用 Angular 清除 HTML 内容
【发布时间】：2014-09-10 23:00:34
【问题描述】：

我试图隐藏我在 index.html 中包含的 HTML 的一部分。现在发生的情况是，当我搜索用户时，表格以及内容会呈现在页面上。我想要的行为是当按下包含 HTML 表及其内容的“清除”时，将被删除。现在，该表将仅显示 $scope.user 是否具有值并且该检查是使用 ng-if 完成的。当我单击“清除”按钮时，我将 $scope.user 设置为“false”，我认为这会删除包含。我也尝试将它添加到表 DOM 元素中，但这也不起作用。我没有得到什么？我敢肯定，对于更了解 Angular 的人来说，这是一个相当简单的解决方法。

index.html

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

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1>{{ message }}</h1>

  <div>{{ error }}</div>
  <form name="searchUser" ng-submit="search(username)">
    <input type="search" required placeholder="Username..." ng-model="username" />
    <input type="submit" value="Search" />
    <button ng-click="clearSearch()">Clear</button>
  </form>

  <div ng-include="'userDetails.html'" ng-if="user"></div>
</body>

</html>

script.js

(function() {

  var app = angular.module("githubViewer", []);

  var MainController = function($scope, $http) {

    var onUserComplete = function(response) {
      $scope.user = response.data;
      $http.get($scope.user.repos_url)
        .then(onRepos, onError);
    };

    var onRepos = function(response) {
      $scope.repos = response.data;
    }

    var onError = function(reason) {
      $scope.error = "Could not fetch the data";
    }

    $scope.search = function(username) {
      $http.get("https://api.github.com/users/" + username)
        .then(onUserComplete, onError);
    }

    $scope.clearSearch = function() {
      return ($scope.user = false);
    }

    $scope.message = "Github Viewer";
    $scope.repoSortOrder = "+name";
  };


  app.controller("MainController", ["$scope", "$http", MainController])

}());

userDetail.html

<div>
  <h2>{{ user.name }}</h2>
  <img ng-src="http://www.gravatar.com/avatar/{{ user.gravatar_id }}" />
  <h2>User Repositories</h2>
  Order By:
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Stars</option>
    <option value="+language">Language</option>
  </select>
  <table>
    <thead>
      <tr>
        <th>Repository Name</th>
        <th>Stars</th>
        <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
        <td><a href="{{ repo.html_url }}">{{ repo.name }}</a>
        </td>
        <td>{{ repo.stargazers_count | number }}</td>
        <td>{{ repo.language }}</td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

我最终弄明白了。问题是

<button ng-click="clearSearch()">Clear</button>

在<form> 中，所以当我单击“清除”按钮时，搜索功能再次被执行。我通过 Chrome 控制台注意到了这一点，因为我打开了 XHR 请求……当我单击“清除”时，正在执行另一个 GET。

我将按钮移到了<form> 之外，功能按预期工作。

【讨论】：

【解决方案2】：

clearSearch() 应该设置 $scope.user 的值而不是返回值：

$scope.clearSearch = function() {
  $scope.user = false;
}

【讨论】：

我在寻求帮助之前尝试过，它似乎表现出与不删除内容相同的行为。