-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
我已刪除嵌套控制器,但仍無法正常工作,實際的數據被從[鏈接]到來(https://api.github.com/users/mojombo)。嘗試mojombo在搜索中,你將能夠知道。編輯plunk後[https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview) –
現在一切正常,錯誤是,我正在調用repos到$ scope.obj,但是調用了repos做功能。該鏈接是 - [鏈接](http://plnkr.co/edit/Pga9Ou0sfay2kJDRgpZX?p=preview) –
祝你好運!享受有角的世界! –