I'm trying to get an object like this:
$scope.order = {
'client' : '24',
'products' : [
{'id': '23', 'format' : 'box', 'units': '3'},
{'id': '33', 'format' : 'can', 'units': '24'},
{'id': '11', 'format' : 'box', 'units': '4'}
]
}
having the next controller
(function(){
var app = angular.module('myApp',[]);
app.controller('Controller', function($scope){
//data from service
var items = [
{'id':1, 'name': 'redItem'},
{'id':2, 'name': 'blueItem'},
{'id':3, 'name': 'yellowItem'},
{'id':4, 'name': 'greenItem'},
];
$scope.products = items;
$scope.order = {
'client' : '12',
};
$scope.order.products = {};
$scope.show = function(productID){
console.log($scope.order.products);
console.log($scope.order);
};
});
})();
and view
<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>
</p>
</li>
I'm trying to update de object every time the checkbox is changed, adding the product id if checked and units of the input number but the structure I'm getting is wrong
$scope.order = {
"client":"12",
"products":{
"id":{"0":1,"1":2,"3":4},
"units":{"1":2,"3":1}
}
}
any clues??
EDIT:
I forgot the plunker... plunker
In your view:
<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>
</p>
</li>
You are creating an array called id by using the model order.products.id[$index] and an array called units by using the model order.products.units[$index]. You are actually trying to access a product in the order.products[] array. Rather than jump through the hoop of creating a new object, I would mark the item as selected and track its units. You can then filter to just the selected products and do any desired transformation when the order is completed.
Controller:
(function(){
var app = angular.module('myApp',[]);
app.controller('Controller', function($scope, $filter){
//data from service
var items = [
{'id':1, 'name': 'redItem'},
{'id':2, 'name': 'blueItem'},
{'id':3, 'name': 'yellowItem'},
{'id':4, 'name': 'greenItem'},
];
$scope.products = items;
$scope.order = {
'client' : '12',
};
$scope.show = function(productID){
console.log($scope.order.products);
console.log($scope.order);
$scope.order.products = $filter('filter')($scope.products, { isSelected: true }, true);
};
});
})();
View:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Controller">
<ul class="list">
<li ng-repeat="product in products">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show(product.id)" ng-model="product.isSelected" />
<input type="number" ng-model="product.units" min="1" ng-show="product.isSelected" />
</p>
</li>
</ul>
<p>{{order}}</p>
</div>
</body>
</html>
Plunker: http://plnkr.co/edit/1DYsSYF6Fscxto6vykJU?p=preview
Modified the ng-model and ng-show to reflect array instead of object and similarly modified the js code
Plunker: http://plnkr.co/edit/TNBZgKNDTDhiLt3yOJkB?p=preview
<input type="checkbox" ng-change="show(product.id)" ng-model="order.products[$index].id" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products[$index].units" min="1" ng-show="order.products[$index].id"/>
$scope.order.products = [];
Related
My code: http://pastebin.com/AyFjjLbW
I'm trying to learn AngularJS and in the beginning it was going well but now I am stuck. What I want to do is use the drop down menu to select a priority and a type of job that can be done but I can not figure out how on earth I can get a value from a input tag and use it in my script when I try to push a value from an array into my object.
You can see my failed attempt here:
priority: $scope.priority[other_options.worktype]
Thank you!
Here is the proper way of doing what you want :
<!DOCTYPE html>
<html lang="en-us" ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
<title>Alex's Todo List</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div ng-controller="placingItems">
<h1>To Do List</h1>
<center><button type="button" ng-click = "clear_all()">Clear List</button></center>
<p>What to do: <input type="text" ng-model="thing">
<form name="other_options">
<select ng-model="worktype" ng-options="worktype.label for worktype in worktypeList" ></select>
<select ng-model="priority" ng-options="priority.label for priority in priorityList" ></select>
<input type="submit" ng-click="add()">
</form>
</p>
<div class="block">
<p>To do:</p>
<center><li ng-repeat = "x in items">
<span ng-style="cmplt">{{ x.name }}</span> {{ x.type.label }} {{ x.priority.label }}
<button type="button" ng-click="cmplt={color: 'gray', 'text-decoration': 'line-through'}">Completed</button>
</li></center>
</div>
</div>
</body>
</html>
<script>
angular.module('todoApp.controllers', [])
.controller('placingItems', ['$scope', function($scope) {
$scope.thing = "Nothing";
$scope.items = [];
$scope.priorityList = [{
label:'Top Priority',
id: 1
}, {
label: 'Mid Priority',
id: 2
}, {
label: 'Low Priority',
id: 3
}];
$scope.worktypeList = [{
label:'Work',
id: 1
}, {
label: 'Personal',
id: 2
}];
$scope.add = function(){
$scope.items.push({
name: $scope.thing,
priority: $scope.priority,
type: $scope.worktype
});
};
$scope.clear_all = function(){
$scope.items = [];
};
}]);
var app = angular.module('todoApp', ['todoApp.controllers']);
</script>
Your form field should have ng-model associated with them so that you can access those value inside controller scope. Basically when your create a form with name attribute, at that time name attribute gets added to controller scope variable & then that scope variable will give you all the form related validation inside the object.
Markup
<form name="other_options" ng-init="formData={}">
<select name="worktype" ng-model="formData.worktype">
<option selected value="-" name = "work">Work</option>
<option value="1" name="home">Home</option>
</select>
<select name="priortype" ng-model="formData.worktype">
<option value="0" name="top">Top Priority</option>
<option selected value="1" name="mid">Mid Priority</option>
<option value="2" name="low">Low Priority</option>
</select>
<input type="submit" ng-click="add()">
</form>
Then only you can access this value inside controller using like $scope.formData.worktype
Code
$scope.add = function(){
$scope.items.push(
{name: $scope.thing,
priority: $scope.formData.worktype, //or $scope.formData["worktype"]
type: $scope.type[1]
});
};
Take a look at http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller it is very good. Hope this is what you need.
I have a loop ng-repeat
<div ng-repeat="data in datas">
Name: {{data.name}} <input type="text" ng-model="age">
</div>
I want $scope.age become to $scope.age_data.name. Eg: $scope.age_Tan, $scope.age_Jim...
So i have tried ng-model="age_{{data.name}}" but it make error.
How to solve this?
The "right" way to do this is to, in the controller, do this:
$scope.ages = {};
Then in the template:
Name: {{data.name}} <input type="text" ng-model="ages[data.name]">
Should work...
What you show here won't work exactly here's a couple of options
angular.module('myApp', [])
.controller('MyCtrl', function() {
var vm = this;
vm.datas = [{
name: 'thing1'
}, {
name: 'thing2'
}, {
name: 'thing3'
}];
})
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl as myCtrl">
Option 1
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="data.age" />
</div>
<br/>
<br/>Option 2
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="myCtrl.age[data.name]" />
</div>
<pre>{{myCtrl|json}}</pre>
</body>
</html>
I am not sure why you want to keep age of a person in another object/container. Here is the solution which may help you rethink you design.
$scope.people= [
{name: 'Tan', age: 20},
{name: 'Jim', age: 21}
];
<div ng-repeat="person in people">
Name: {{person.name}} <input type="text" ng-model="person.age">
</div>
Using Angular JS, I have this object
var pages = [
{ name: 'users', title : "Users" },
{ name: 'roles', title : 'Roles' }
];
I'm trying to create a page for user roles. For that I need 4 checkboxes for each page. Each page must have 4 rules. Access, show, edit, delete.
Displaying pages in a ng-repeat
<div ng-controller='PageCtrl'>
<ul>
<li ng-repeat='page in pages'>
{{ page.title }}
<input type="checkbox" name="access"> Access
<input type="checkbox" name="show"> Show
<input type="checkbox" name="edit"> Edit
<input type="checkbox" name="delete"> Delete
</li>
</ul>
</div>
So I need to pass those checkboxes values to the $scope. How can I bind a model for each checkbox?
Like this
<input type="checkbox" name="access" ng-model='page.name+_access'> Access
Checkbox model name should start with page.name. Like users_access, users_show...
You can use the following syntax:
ng-model="page[page.name+'_access']"
But as a matter of fact, it looks one can move those groups into controller as well, then use another ng-repeat. Like this:
HTML:
<div ng-controller="PageCtrl">
<ul>
<li ng-repeat='page in pages'>{{ page.title }}
<label ng-repeat="right in rights">
<input type="checkbox" ng-model="page[page.name + '_' + right]" name="{{right}}" />{{right|capitalize}}</label>
<button ng-click="log(page)">Log</button>
</li>
</ul>
</div>
JS:
var module = angular.module('myAp', [])
.controller('PageCtrl', ['$scope', function ($scope) {
$scope.pages = [{
name: 'users',
title: "Users"
}, {
name: 'roles',
title: 'Roles'
}];
$scope.rights = ['access', 'show', 'edit', 'delete'];
$scope.log = function (page) {
console.log(page);
}
}]).filter('capitalize', function() {
return function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
};
});
Demo.
I am using Ionic/Angular.
I have a search bar which I need to have it working in 2 different scenarios BUT at the same time. Look:
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!--here is the ng-model query-->
<input type="search" placeholder="Search" ng-model="query">
</label>
<!--here is the 1st filter:query-->
<div ng-repeat="sport in sports | filter:query" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<!--here is the 2nd filter:query-->
<div class="item item-button-right"
ng-repeat="league in sport.leagues | filter:query"
on-tap="goToLines(league)">
{{league.name}}
</div>
so, all I need is that when the user is searching for something, the search bar returns sport.name and league.name, is it clear for you guys?
UPDATE*
this is the service where I am calling sports:
getSports: function(agent) {
var defer = $q.defer();
LocalForageFactory.retrieve(CONSTANT_VARS.LOCALFORAGE_SPORTS)
.then(function(sports) {
if (!_.isNull(sports)) {
defer.resolve(_.values(sports));
}else {
$http.get(CONSTANT_VARS.BACKEND_URL + '/lines/sports/' + agent)
.success(function(sports) {
//forcing array instead of object
sports = _.values(sports);
sports = _.sortBy(sports, function(sport) {
return sport.priority;
});
LocalForageFactory.set(CONSTANT_VARS.LOCALFORAGE_SPORTS, sports);
defer.resolve(sports);
})
.error(function(err) {
defer.reject(err);
});
}
});
return defer.promise;
},
If you wanted to search either field, drop the second filter and use the special $ to traverse the object hierarchy. See the documentation for more info.
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.sports = [
{name: 'Basketball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'Volleyball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'test', leagues: [{name: 'test'}]}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="search" placeholder="Search" ng-model="query">
<div ng-repeat="sport in sports | filter:{$: query}" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<div class="item item-button-right"
ng-repeat="league in sport.leagues"
on-tap="goToLines(league)">
{{league.name}}
</div>
</div>
</div>
Hello Everyone I have face a problem to create a object with ng-repeat. when i declare the Object then the same value in filled in the text box which has same ng-model value. if i am not Declare the object then duplicacy is not occures.
If i am declare the $scope.user = {}; in js file then problem is occures. please check this. Give me a solution ASAP.
My Fiddle Link Please Check This http://jsfiddle.net/Ladjkp5s/1/
Here is my Html file
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item + 1}}
<div>
Name: <input type="text" ng-model="user.name"><br>
Address: <input type="text" ng-model="user.add"><br>
Phone: <input type="text" ng-model="user.phn"><br>
ZipCode: <input type="text" ng-model="user.zip">
</div>
</li>
</ul>
</div>
</div>
Here is my JS File
var app = angular.module('myApp', []);
app.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
app.controller('MainController', function($scope) {
$scope.items = [];
$scope.user ={};
for (var i = 0; i < 5; i++) $scope.items.push(i);
});
Thanks.
The problem is that you are using same ng-model for every item.(user.fieldName) you have to use item.fieldName.
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item.index + 1}}
<div>
Name: <input type="text" ng-model="item.name"><br>
Address: <input type="text" ng-model="item.add"><br>
Phone: <input type="text" ng-model="item.phn"><br>
ZipCode: <input type="text" ng-model="item.zip">
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/3akwk7tv/
Yuu can not loop in controller function, but u can create controller that loops in html like in this example
<ul>
<li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ul>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>