2017-04-24 25 views
-1

我是AngularJs的新手。這是一個GitHub,數據控制器AngularJs程序。事實上,使用控制器後的數據,即複選框不會到來,我的重複不工作。angularjs函數不能從github api中提取數據

任何人都可以幫助我嗎?

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

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

 
    $scope.message = "Angularjs"; 
 
    $scope.reposortorder = "stargazers_count"; 
 

 
    var onSuccess = function(response) { 
 
     $scope.obj = response.data; 
 
     $http.get($scope.obj.repos_url).then(onRepoSuccess, onError); 
 
    }; 
 

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

 
    var onError = function(reason) { 
 
     $scope.error = "could not load the user details"; 
 
    }; 
 

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

 

 
    var checkbox = function($scope, $filter, $http) { 
 
    
 
    $http.get("https://api.github.com/users/"+$scope.username) 
 
     .success(function(data) { 
 
      $scope.repos = data; 
 
     }); 
 

 

 
    $scope.chckedIndexs = []; 
 

 
    $scope.checkedIndex = function(repo) { 
 
     if ($scope.chckedIndexs.indexOf(repo) === -1) { 
 
     $scope.chckedIndexs.push(repo); 
 
     } else { 
 
     $scope.chckedIndexs.splice($scope.chckedIndexs.indexOf(repo), 1); 
 
     } 
 
    }; 
 

 
    $scope.selectedRepos = function() { 
 
     return $filter('repo.name')($scope.repos, { 
 
     checked: true 
 
     }); 
 
    }; 
 

 
    $scope.remove = function(index) { 
 
     angular.forEach($scope.chckedIndexs, function(value, index) { 
 
     var index = $scope.repos.indexOf(value); 
 
     $scope.repos.splice($scope.repos.indexOf(value), 1); 
 
     }); 
 
     $scope.chckedIndexs = []; 
 
    }; 
 
    
 
     $scope.checkAll = function() { 
 
    angular.forEach($scope.repos, function(repo) { 
 
     repo.select = $scope.selectAll; 
 
    }); 
 
    }; 
 

 

 
    }; 
 

 
    app.controller("mainController", mainController); 
 

 
    app.controller("checkbox", checkbox); 
 

 
}())
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="mainController"> 
 
    <h1>Hello {{message}}</h1> 
 
    {{username}} 
 

 
<div> 
 
    <form name="searchUser"> 
 
    <input type="search" required placeholder="Github Username to find" ng-model="username"> 
 
    <input type="submit" value="Search" ng-click="search(username)"> 
 
    </form> 
 

 
    <br /> 
 

 
    <div>{{ error}}</div> 
 

 
    <p>Name: {{ obj.name }}</p> 
 
    <p>Mail id: {{ obj.email }}</p> 
 
    <p>Image: 
 
    <br /><img ng-src="{{ obj.avatar_url}}" height="150" title="{{ obj.name}} {{obj.lastName}}" /></p> 
 
    
 
    <div> 
 
    <label>Search:</label> 
 
    <input type="search" ng-model="searchrepo" placeholder="Enter to Search"> 
 
    </div> 
 
    <div ng-controller="checkbox"> 
 
    
 
    <p> 
 
    Sort by: 
 
    <select ng-model="reposortorder"> 
 
     <option value="name">Name</option> 
 
     <option value="stargazers_count">Stars</option> 
 
     <option value="language">Language</option> 
 
    </select> 
 
    </p> 
 
    <div> 
 
    <pre>selected with helper function {{selectedRepos()}}</pre> 
 
    <button ng-click="remove($index)">delete selected</button> 
 
    </div> 
 

 
    <table border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th><input type="checkbox" ng-model="selectAll" ng-click="checkAll"></th> 
 
     <th>Name</th> 
 
     <th>Stars</th> 
 
     <th>Language</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="repo in repos |filter:searchrepo | orderBy:reposortorder"> 
 
     <td><input type="checkbox" ng-model="repo.checked" ng-click="checkedIndex(repo)"/></td> 
 
     <td>{{ repo.name }}</td> 
 
     <td>{{ repo.stargazers_count | number }}</td> 
 
     <td>{{ repo.language}}</td> 
 
     <td><button ng-click="remove($index)">x </button></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div> 
 
    </div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

這裏是plnkr鏈接https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview

回答

0
<div ng-controller="table"> 

這條線路是發生故障的原因。你沒有任何「表格」控制器。您在mainController中綁定回購站。從該div中刪除「表格」控制器,一切都會奏效!

由於

+0

我已刪除嵌套控制器,但仍無法正常工作,實際的數據被從[鏈接]到來(https://api.github.com/users/mojombo)。嘗試mojombo在搜索中,你將能夠知道。編輯plunk後[https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview) –

+0

現在一切正常,錯誤是,我正在調用repos到$ scope.obj,但是調用了repos做功能。該鏈接是 - [鏈接](http://plnkr.co/edit/Pga9Ou0sfay2kJDRgpZX?p=preview) –

+0

祝你好運!享受有角的世界! –