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>
Related
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>
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>
I have a list such as
var items = [1, 2, 3];
var list = [
{
id: 1,
name: 'name 1'
},
{
id: 2,
name: 'name 3'
},
{
id: 3,
name: 'name 2'
}
]
and I use li tag (not option) to show this list.
<div ng-repeat="item in items">
<ul>
<li ng-repeat="name in listName">
<a ng-click="">{{name.name}}</a>
</li>
</ul>
</div>
It will show 3 item and 3 list is same in a item.
Help me when I click name 1 of item 1, will hide name 1 of item 2, 3,... Click name 2 in item 2 will hide name 2 of item 1, 3...
Thanks
Here is how you can do it
angular.module("myApp", []).controller("myCtrl", function($scope) {
$scope.items = [1, 2, 3];
$scope.list = [{
id: 1,
name: 'name 1'
}, {
id: 2,
name: 'name 3'
}, {
id: 3,
name: 'name 2'
}];
$scope.hideOthers = function(item, name){
$scope.selectedItem = item;
$scope.selectedName = name;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
<ul>
<li ng-repeat="name in list">
<a ng-click="hideOthers(item, name.name)" ng-show="!selectedItem || name.name !== selectedName || item === selectedItem">{{name.name}}</a>
</li>
</ul>
</div>
</div>
</body>
</html>
1) You dnt need use variable items only for set loop count. It can make in ng-repeat;
2) You have error in variable name - list, not listName;
<div ng-repeat="i in [1, 2, 3]">
<ul>
<li ng-repeat="name in list">
<a ng-click="name.select = i" ng-if="!name.select || name.select === i">{{name.name}}</a>
<strike ng-if="name.select && name.select !== i">{{name.name}}</strike>
</li>
</ul>
</div>
UPDATE:
3) Also use $scope.list = //data for broadcast data to template;
I'm retrieving 2 JSON arrays from a remote source. I'm trying to filter the results from array X to array Y and only return the unique values from both. All of the questions on stackoverflow are for filtering 1 array not a set of multiple.
You can use something similar to unique filter from the a8m/angular-filter
(function() {
angular.module('myApp', ['angular.filter'])
.controller('HomeController', ['$scope',
function($scope) {
$scope.first = [{id: 1, name:'first'},{id: 2, name:'second'},
{id: 3, name:'third'}, {id: 4, name: 'fourth'} ];
$scope.second = [{id: 1, name:'first'},{id: 2, name:'second'},
{id: 5, name: 'fifth'} ];
}
]);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.min.js"></script>
<div ng-app="myApp">
<div ng-controller="HomeController">
<ul>
<li ng-repeat="item in first.concat(second) | unique:'id'">
{{item.id}} : {{ item.name }}
</li>
</ul>
</div>
</div>
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>