I am new to AngularJs. It's a GitHub, datacontroller AngularJs program. Actually the data after using a controller, i.e checkbox is not coming and my ng-repeat is not working.
Can any anyone help me with this?
(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>
Here is the plnkr link https://plnkr.co/edit/T3AK2QnIMq18oEeMuCQk?p=preview
<div ng-controller="table">
This line is reason of malfunctioning. You don't have any "table" controller. You bind repos in your mainController. Remove the "table" controller from that div, everything will work!
Thanks
Related
I am new to AngularJS, and am working on my first Plunkr. When a user performs a search (from main.html, the corresponding controller is MainController), the correct view is being presented (user.html), but the data from the controller (UserController) is not being passed to the view. What am I doing wrong?
Here the link to the code:
http://plnkr.co/edit/OcfB6tBB36qWO9MiZ9CI?p=preview
Layout page (Index.html):
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="UserController.js"></script>
</head>
<body>
<h1>GitHub Viewer</h1>
<div ng-view></div>
</body>
</html>
Main page (main.html)
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="User name to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
User details page (user.html)
<h1>{{ user.name }}</h1>
{{ error }}
<div><img src="{{ user.avatar_url }}" title="{{user.name}}"> Order:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Repos</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number}}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
MainController.js - controls main.html:
var app = angular.module('githubViewer');
app.controller('MainController', function($scope, $http, $interval,
$log, $anchorScroll, $location) {
$scope.repoSortOrder = "-stargazers_count";
$scope.search = function(username) {
$log.info("Searching for " + username);
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path("/user/" + username);
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
var decrementCountdown = function() {
$scope.countdown -= 1;
if($scope.countdown < 1) {
$scope.countdown = null;
$scope.search($scope.username);
}
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
});
UserController.js (controls user.html) -- this is where it seems to fail.
var app = angular.module('githubViewer');
app.controller("UserController", UserController);
var UserController = function($scope, $log, $http, $routeParams) {
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;
$location.hash("userDetails");
$anchorScroll();
};
var onError = function(reason) {
$scope.error = "Could not fetch the data";
};
$scope.username = $routeParams.username;
$scope.repoSortOrder = "-stargazers_count";
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
Any help will be appreciated.
I want to print the values of a array based on the checkbox associated with it. Find the code below
Javascript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= [{name:"John",selected:"false"},{name:"Anil",selected:"false"},{name:"Kumar",selected:"false"}];
$scope.lastName= "Doe";
$scope.name1=[],
$scope.addname=function(){
angular.forEach($scope.firstName, function(name,selected){
if(selected=="true") {
alert(name);
$scope.name1.push(name)
}
});
}
});
html:
<div ng-app="myApp" ng-controller="myCtrl">
<table >
<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected">{{first.name}}</td>
</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>
<tr ng-repeat="nam in name1">{{nam}}</tr>
</table>
</div>
Keep selected value as Boolean than String
In forEach, first argument is Object, access the model associated with it using name.selected
Initialize name1 array in ng-click handler
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = [{
name: "John",
selected: false
}, {
name: "Anil",
selected: false
}, {
name: "Kumar",
selected: false
}];
$scope.lastName = "Doe";
$scope.addname = function() {
$scope.name1 = [];
angular.forEach($scope.firstName, function(name, selected) {
if (name.selected) {
$scope.name1.push(name)
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="first in firstName">
<td>
<input type="Checkbox" ng-model="first.selected">{{first.name}}</td>
</tr>
<tr>
<td>
<input type="Button" ng-click="addname()" value="Submit" ng-model="lastName">
</td>
</tr>
<tr ng-repeat="nam in name1">{{nam}}</tr>
</table>
{{name1}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= [{name:"John",selected:false},{name:"Anil",selected:false},{name:"Kumar",selected:false}];
$scope.lastName= "Doe";
$scope.name1=[];
$scope.addname=function(){
angular.forEach($scope.firstName, function(name){
if(name.selected === "true") {
$scope.name1.push(name);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table >
<tr ng-repeat="first in firstName">
<td><input type="Checkbox" ng-model="first.selected" ng-true-value="true" >{{first.name}}</td>
</tr>
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr>
<tr ng-repeat="nam in name1"><td>{{nam}}</td></tr>
</table>
</div>
I have a small program where I have 3 checkboxes. I may check any or all of the checkboxes. I will need to alert the names of the People infront of whose id I have checked the checkboxes.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,x) in People">
<td><input type="checkbox" id="{{x.id}}" >{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.checkboxArray = [];
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
//alert function
$scope.alert = function(){
angular.forEach($scope.People, function(val,key) {
if('#val.id:checked'){
$scope.checboxArray + = $scope.People[key].name;
}
alert($scope.checkboxArray);
}
}
});
</script>
</body>
</html>
I am not sure if I am putting the condition properly inside if() condition. Can someone help?
You need to store the checked status using ng-model like below then find the checked items using the People array
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.checkboxArray = [];
$scope.People = [{
name: "Peter",
id: "201"
}, {
name: "Lina",
id: "202"
}, {
name: "Roger",
id: "203"
}];
//alert function
$scope.alert = function() {
var selected = $scope.People.filter(function(item) {
return item.checked
}).map(function(item) {
return item.name;
})
alert(selected);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<table>
<tr ng-repeat="(key,x) in People">
<td>
<input ng-model="x.checked" type="checkbox" id="{{x.id}}">{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<pre>{{People}}</pre>
</div>
</div>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,x) in People">
<td><input type="checkbox" id="{{x.id}}" ng-model="x.checked">{{x.name}}</td>
</tr>
</table>
<button ng-click="alert()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.checkboxArray = [];
$scope.People = [
{name:"Peter",id:"201", checked : false},
{name:"Lina",id:"202", checked : false},
{name:"Roger",id:"203", checked : false}
];
//alert function
$scope.alert = function(){
angular.forEach($scope.People, function(val,key) {
if(val.checked){
$scope.checboxArray.push(val.name);
} else{
alert(val.name ," is not checked");
}
}
}
});
</script>
</body>
</html>
Here's a working JSFIDDLE for your problem.
As Arun mentionned, the easiest way is to get the checked value using ng-model.
I updated your previous code and added my solution :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<td>
<input type="checkbox" ng-model="x.checked" id="{{x.id}}" >{{x.name}}<br/>
</td>
</tr>
</table>
<button ng-click="doAction()">Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201", checked:"false"},
{name:"Lina",id:"202", checked:"false"},
{name:"Roger",id:"203", checked:"false"}
];
$scope.doAction = function() {
for(var x = 0;x < $scope.People.length;x++)
{
if ($scope.People[x].checked == true)
alert($scope.People[x].name);
}
}
});
</script>
</body>
</html>
Almost everything working good beside 2 things
Code
var app = angular.module("MyApp", []);
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.itemsPerPage = 1;
$scope.currentPage = 0;
$scope.items = [];
for (var i=0; i<50; i++) {
$scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
}
$scope.range = function() {
var rangeSize = 3;
var ret = [];
var start;
start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.filtered.length/ $scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n) {
$scope.currentPage = n;
};
var filterBy = $filter('filter');
$scope.$watch('search', function (newValue) { $scope.filtered = filterBy($scope.list, newValue); }, true);
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table class="table table-striped">
<thead>
<tr>
<th><input ng-model="search.name" ></th>
<th><input ng-model="search.years"></th>
<th><input ng-model="search.owners"></th>
<th><input ng-model="search.accidents"></th>
<th><input ng-model="search.description"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cars in filtered| offset:currentPage*itemsPerPage | limitTo: itemsPerPage">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
{{n+1}}
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
My objects are displayed only when i start typing into filter field, as i see after pagination is updated actively with typing but then happening sth strange, pagination displayed also pages with minuses ?
So i would like to make items showed already without starting typing into filter and make these minuses disappear.
Thanks ;)
var app=angular.module('MyApp', []);
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.currentPage = 0;
$scope.pageSize = 1;
$scope.numberOfPages=function(){
var myFilteredData = $filter('filter')($scope.list, $scope.search);
return Math.ceil(myFilteredData.length/$scope.pageSize);
};
});
app.filter("offset", function() {
return function(input, start) {
start = +start;
return input.slice(start);
};
});
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table>
<tr>
<th><input type="text" ng-model="search.name" class="form-control input-sm" placeholder="SEARCH" ></th>
<th><input type="text" ng-model="search.years" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.owners" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.accidents" class="form-control input-sm" placeholder="SEARCH"></th>
<th><input type="text" ng-model="search.description" class="form-control input-sm" placeholder="SEARCH"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
<tr ng-repeat="cars in list | filter:search|offset:currentPage*pageSize | limitTo:pageSize">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</table>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="(currentPage + 1) == numberOfPages()" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>
Solved
My code is like this.
<form name="palletForm" novalidate=novalidate>
<div ng-app='myApp' ng-controller="MainCtrl">
<!--Small Package starts here -->
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line Quantity#</th>
<th>Ship Quantity</th>
<th>PickQuantity</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.LINQTY}}</td>
<td>{{data.SHPQTY}}</td>
<td>{{data.PickQty}}</td>
<td>
<input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
</td>
<td>{{data.SHPQTY}}</td>
</tr>
<tr>
<td width="100%" colspan="4">
<button ng-show="prdElement.show" type="button" ng-click="newPackageItem( prdElement,$event)">Finish Package</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--Small Package ends here -->
</div>
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var counter = 0;
$scope.packageElement = [{
show: true,
palletClosed: false,
disableNextPallet: false,
Data: [{
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "021041029300",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 1000,
"Qtyplt": 0,
"packed": 0
}, {
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "4901000002201",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 2000,
"Qtyplt": 0,
"packed": 0
}]
}];
$scope.newPackageItem = function (packageElement, $event) {
var npackageElement = {};
angular.copy(packageElement, npackageElement);
counter++;
packageElement.show = false;
npackageElement.name = counter;
angular.forEach(npackageElement.Data, function (row) {
if (row.PickQty != row.newquantity || row.PickQty != 0) {
row.PickQty = row.PickQty - row.newquantity;
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
}
});
npackageElement.show = true;
angular.forEach(packageElement.Data, function (row) {
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
});
$scope.packageElement.push(npackageElement);
};
}]);
Inside button click I am calling a function newPackageItem I want to validate my text boxes before that function executes. textbox is number only field and required. I want to validate it in angular way. How can I achieve this?
Fiddle
<body ng-app="phonecatApp">
<form ng-controller="PhoneListCtrl" name="myForm">
<p>
<input name="Quantity" ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
<span class="error" ng-show="myForm.Quantity.$error.pattern">
</span>
</p>
</form>
</body>
and in your javascript file
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.pattern = /^[0-9]*$/;
});
Here is a validation example i uploaded to jsfiddle:
http://jsfiddle.net/sfk1bu1y/1/
AngularJS form validation is your friend:
https://docs.angularjs.org/guide/forms