使用Angular清理HTML內容

我試圖隱藏我在index.html中包含的HTML的一部分。現在發生的事情是，當我搜索用戶時，表格和內容在頁面上呈現。我想要的行爲是當按下包含HTML表格及其內容的「清除」時，將被刪除。此時表格只會顯示$ scope.user是否有值，而檢查是否使用ng-if完成。當我點擊「Clear」按鈕時，我將$ scope.user設置爲「false」，我認爲這會刪除include。我也嘗試將它添加到表DOM元素，但這也不起作用。我沒有得到什麼？我相信對於瞭解更多關於Angular的人來說，這是一個相當簡單的解決方案。使用Angular清理HTML內容

的index.html

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

<head> 
    <script data-require="[email protected]*" 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>

來源

2014-09-10 Captainslow

我最終搞清楚了。問題是，

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

是在<form>所以當我點擊「清除」按鈕被再次執行搜索功能。我通過Chrome控制檯注意到了這一點，因爲我打開了XHR請求......當我點擊「清除」時正在執行另一個GET。

我移動了<form>之外的按鈕，該功能按預期工作。

來源

2014-09-11 00:01:11 Captainslow

-1

clearSearch（）應當設置值$ scope.user而不是返回值：

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

來源

2014-09-10 23:18:10

我試過在尋求幫助之前，它似乎顯示不刪除內容的相同行爲。 – Captainslow 2014-09-10 23:48:20

使用Angular清理HTML內容

回答

相關問題