I have a $scope param that looks like this:
$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']},
{name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];
In the html file I then try to display this as a list like this:
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
<input type="checkbox" ng-repeat="brand in filter.brands"> {{brand}}<br>
</div>
The filter.name works, as I see "Brands" and "Catalogs", but below them I see empty checkboxes.
The only way to get it to work is to take the ng-repeat out of the input and put it outside in a label or something.
Am I missing something here?
like this
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']},
{name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
<div ng-repeat="brand in filter.brands">
<input type="checkbox" ng-model="brands"> {{brand}}<br>
</div>
</div>
</div>
Related
Hi have used filter with ng-repeat to search records
like
<input type="text" ng-model="search">
<tr ng-repeat="data in vm.records | filter:search"></tr>
filter is only worked when whole text match like I have records
user1,user,test1,test2 if i type u or t only it is not showing any result and if I type user1 then it matched record
please suggest me any idea
thanks in advance.
Check this might be helpful.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl as vm">
<input ng-model="name">
</br>
</br>
Filter All Field
<ul>
<li ng-repeat="x in vm.names | filter : name">
{{ x.name }}
</li>
</ul>
Filter Specific Field
<ul>
<li ng-repeat="x in vm.names | filter : {name:name}">
{{ x.name }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
this.names = [{
name: 'user1',
last: 'last1'
}, {
name: 'user2',
last: 'last1'
}, {
name: 'user3',
last: 'last3'
}, {
name: 'test1',
last: 'last4'
}];
});
</script>
</body>
</html>
Your example should be working with a single letter match. If you type u it will show user1 and user2, if you type t it will show test1 and test2:
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.records = [
{ name: 'user1' },
{ name: 'user2' },
{ name: 'test1' },
{ name: 'test2' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<input type="text" ng-model="search">
<table>
<tr ng-repeat="data in vm.records | filter:search">
<td>{{data.name}}</td>
</tr>
</table>
</div>
Working plnkr
http://embed.plnkr.co/Oza8cb4sz32g8QOSCWqT/
Ignore the HTML.
There's no problem in the ng-repeat or the filter model. You need to change the structure of the binding declaration.
Please try to post full code. Cheers!
Please share your vm.records array withing object so you should try with
<tr ng-repeat="data of vm.records | filter:search"></tr>
please show below example may be helpful to you
example
exampleDEMO
You can see code above link.
Actually, I want to according the button group's input to control all of input form which name is the same with button group name.
For example, I put value into input form on the 'First' Button right side,
and the same time, all of the input form which name 'First' should be change
with just button group input one.
Sorry for my poor English skill, hope you can understand it!!
<div ng-app="app" ng-controller="AppCtrl">
// list group
<div>
<ul>
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" ng-model="price">
</li>
</ul>
</div>
// button group
<div>
<ul class="list-btn">
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" ng-model="price_all">
</li>
</ul>
</div>
</div>
angular.module('app', [])
.controller('AppCtrl', ['$scope', function ($scope) {
$scope.items = [
{id: 1, name: 'First'},
{id: 2, name: 'Second'},
{id: 3, name: 'Third'},
{id: 4, name: 'First'},
{id: 5, name: 'Second'},
{id: 6, name: 'Third'},
{id: 7, name: 'First'},
{id: 8, name: 'Second'},
{id: 9, name: 'Third'},
]
$scope.btns = ['First', 'Second', 'Third'];
}])
Since ng-model is repeated insisde li tag, the two-way binding will work only inside that li tag, not outside of it. So, you need to use onkeyup event.
Working solution in the fiddlder - https://jsfiddle.net/fcoLmd2n/
Do these changes in html:
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" class="{{item.name}}" ng-model="price">
</li>
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" btnType="{{btn}}" ng-model="price_all" onkeyup="Update(this);">
</li>
Changes in Js file:
function Update(obj)
{
var className = obj.getAttribute('btnType');
var txtBoxElements = document.getElementsByClassName(className);
for(var i=0;i<txtBoxElements.length;i++)
{
txtBoxElements[i].value= obj.value
}
}
Use Jquery for optimization
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>
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 = [];
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>