Output should be
Name : AAA, Type: Flower
Name : BBB, Type: Bird
Controller
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
}
HTML
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ ??? }}
</div>
</div>
</div>
How can I retrieve a matching element in $scope.types by 'item.type'?
Your controller should be:
angular.module('myApp', []).controller('myCtrl', myCtrl);
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
$scope.getType = function(id){
return $scope.types.filter(function(item){
return (item.id === id);
})[0].name;
}
}
And template:
<div ng-app='myApp'>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.type) }}
</div>
</div>
</div>
I worked here: http://jsfiddle.net/f9019o5k/2/
Write and function in your controller which will return the required type. Doing entire thing in HTML might make it unreadable and complex
$scope.getType(id){
return $scope.items.filter(function(item){
item.id === id;
});
}
And call it in your HTML as
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.id) }}
</div>
</div>
</div>
Its too simple if we Use angular filters to achieve this.
app.filter('myFilter ', function() {
return function(input,obj) {
angular.forEach(obj,function(val){
if(val.id == input)
{
return val.name;
}
})
};
});
Html
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ item.type | myFilter:types }}
</div>
</div>
</div>
Related
hello everyone I have a problem I want to change the value of type in ng-repeat
here is the simple example to explain what I want to say
let arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
]
<ul>
<li ng-repeat="arr">arr.school_id</li> <!-- here shuld print school name instide of schoolid -->
</ul>
I need in id 1 change school_id to "primarySchool" and in id 2 change to "hightSchool" and so on
Use ng-switch and add your condition as you need,
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="schooldObj in arr">
<div ng-switch on="schooldObj.school_id">
<div ng-switch-when="1">
PrimarySchool
</div>
<div ng-switch-default>
hightSchool
</div>
</div>
</ul>
</body>
$scope.arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
]
//then there we are using ng-repeat with ng-if
<ul>
<li ng-repeat="schoolidobj in arr">
//here if school_id is 1 then this condition is executed
<div ng-if="schoolidobj.school_id == '1' ">
primarySchool
</div>
//here if school_id is 2 then this condition is executed
<div ng-if="schoolidobj.school_id == '2' ">
highSchool
</div>
</li>
</ul>
You need some kind of IF statement, I suggest a simple ternary operator for ID 1 and 2 as your only choices. Here is what it will look like:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.arr = [{
school_id: 1,
name: "jon"
},
{
school_id: 2,
name: "sam"
},
{
school_id: 1,
name: "sara"
},
{
school_id: 2,
name: "youfiy"
}
]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="school in arr">
{{ "test/" + ((school.school_id==1) ? "primarySchool" : "hightSchool") + "&" + school.name}}
</li>
</ul>
</div>
</body>
</html>
Even better: just call a function that will return a string that you need. You can have as many if statements inside it, feel free to expand it with any logic.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.arr = [{
school_id: 1,
name: "jon"
},
{
school_id: 2,
name: "sam"
},
{
school_id: 1,
name: "sara"
},
{
school_id: 2,
name: "youfiy"
}
]
$scope.getURL = function(school) {
var s = "";
if (school.school_id == 1) {
s = "primarySchool";
} else if (school.school_id == 2) {
s = "hightSchool";
}
return "test/" + s + "&" + school.name;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="school in arr">
{{ getURL(school) }}
</li>
</ul>
</div>
</body>
</html>
<div class="district-list" ng-repeat="office in offices | filter : {'DisplayOffice' : officeLocationLevelList.searchText}|limitTo:1">
Have a multilevel list of data. depending on the condition i want to filter the data.(First Level/ inner level). If the first level is selected then i have to search with one json attribute and if the inner level is selected then search with another json attribute. I have set it in a scope variable. How can use scope variable instead of 'DisplayOffice'
you can bind a function to filter which returns the filter condition using scope variables.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
$scope.getCondition = function() {
var obj = {};
obj[$scope.key] = $scope.value;
return obj;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]:value}">
{{item.name}}
</div>
</div>
and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.$watch("key", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.$watch("value", function() {
console.log({[$scope.key]:$scope.value});
});
$scope.data = [
{
id: 1,
name: 'name1'
},{
id: 2,
name: 'name2'
},{
id: 3,
name: 'name3'
},{
id: 3,
name: 'aaaaa'
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
Key: <input type="text" ng-model="key">
Value: <input type="text" ng-model="value">
<div ng-repeat="item in data | filter: {[key]: value}">
{{item.name}}
</div>
</div>
I am trying to create a filter where I can conditionally select multiple attributes of the same variable. For example
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'} ]
<div ng-repeat="item in list| filter:{state:'U'}>
This would result in id 1 only being displayed.
<div ng-repeat="item in list| filter:{state:'P'}>
This would result in id 2 only being displayed.
How can I create a filter to display all id's that have state:'P' OR state:'A'
Neither of the below work:
<div ng-repeat="item in list| filter:{state:'P' || 'A'}>
<div ng-repeat="item in list| filter:({state:'P'} || {state:'A'})>
Hope this below code snippet might help you ! Run it :)
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.list = [{
id: 1,
state: 'U'
}, {
id: 2,
state: 'P'
}, {
id: 3,
state: 'A'
}];
$scope.state = function(item) {
return (item.state == 'P' || item.state == 'A');
};
});
<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="item in list | filter:state">
{{item.id}}
</div>
</div>
Why do have so much confusion. Use ng-if just like your normal if statement like this
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'},{id: 1, state: 'A'} ]
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
Implementation is also as below
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list = [{id: 1,state: 'U'}, {id: 2,state: 'P'}, {id: 3, state: 'A'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
</div>
I'm trying to change which property I'm filtering by assigning the property name to a variable, but it's not working. Is there a way to accomplish this without writing my own filter? codepen
<div ng-app="app" ng-controller="main as m">
<input ng-model="keyword"/>
<p>Property: {{m.property}}</p> <!-- resolves to 'name' -->
<!-- does not work-->
<div ng-repeat="o in m.objects | filter:{m.property:keyword}">
{{o.name}}
</div>
<hr/>
<!-- works-->
<div ng-repeat="o in m.objects | filter:{name:keyword}">
{{o.name}}
</div>
</div>
If I understand your question right, I think this is what you are looking for.
Relevant code:
HTML:
<select ng-model="property" ng-change="clearSearch()">
<option>name</option>
<option>age</option>
<option>city</option>
</select>
<input ng-model="search[property]" />
<div class="box">
<div class="item" ng-repeat="item in data | filter:search">
{{item.name}} | {{item.age}} | {{item.city}}
</div>
</div>
Javascript:
var app = angular.module("myapp", []);
app.controller("main", function($scope){
$scope.search = {};
$scope.clearSearch = function(){
$scope.search.name = "";
$scope.search.age = "";
$scope.search.city = "";
}
$scope.property = "name";
$scope.data = [
{
name: "Robert",
age: 23,
city: "Orem"
},
{
name: "Alice",
age: 44,
city: "Nephi"
},
{
name: "Susan",
age: 12,
city: "Odgen"
},
{
name: "Henry",
age: 63,
city: "South Jordan"
},
{
name: "Frank",
age: 35,
city: "Provo"
},
{
name: "Albert",
age: 32,
city: "Payson"
},
];
});
In short, <div ng-repeat="o in m.objects | filter:{m.property:keyword}"> {m.property:keyword} is not a correct expression
Have you tried filter without the "m." in "m.property"?
<div ng-repeat="o in m.objects | filter:{property:keyword}">
How can i filter the second combobox choices based on what i select on first combobox?
So here is the controller... and the view file.
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd"></select>
<label><input type="checkbox" </label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
And when i click the checkbox.. i need first combobox to be disabled(so i can't select other Parinte)
You can filter results with pipe to filter
and use ng-disabled for select (i had a plnkr for you but it there is something wrong with plnkr functionality at this moment
so here is a HTML, i've change models for selects as well as extended their functionality
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"
ng-disabled="tierdisable"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd | filter:{idP:pSelected}:true "></select>
<label><input type="checkbox" ng-model="tierdisable">Disable</label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
disabled :
<div>
Parinti:
<select ng-model="vm.parinti" ng-options="parinte.nume for parinte in vm.parinti" ng-disabled="checked"></select>
Copii:
<select ng-model="vm.copii" ng-options="copil.nume for copil in vm.copii "></select>
Blocat:
<input type="checkbox" ng-model="checked">
</div>