It seems so easy but I can't get this to work:
I want ng-repeat to show the entry only when istLand == 1.
<body ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="ort in orte | filter:{istLand : 1}">
{{ ort.ortsname }}
</div>
</div>
</body>
function Ctrl($scope) {
$scope.orte = {"2812197":{"ortsname":"Berlin","istLand":1},
"2829695":{"ortsname":"Munich","istLand":0}}
}
you can try something like this
<div ng-repeat="ort in orte">
<span ng-if="ort.istLand == 1">{{ ort.ortsname }} </span>
</div>
OR
your code will work if you following below structure
$scope.orte = [
{id:"2812197", ortsname:"Berlin", istLand:1},
{id:"2829695", ortsname:"Munich", istLand:0}
]
here is the Demo Fiddle
By using custom filter in angularjs, implement the same.
function Ctrl($scope) {
$scope.orte = {"2812197":{"ortsname":"Berlin","istLand":1},"2829695":{"ortsname":"Munich","istLand":0},"2829694":{"ortsname":"Delhi","istLand":1},"2829696":{"ortsname":"Beijing","istLand":0},"2829698":{"ortsname":"Sydney","istLand":1}}
}
angular.module('myApp', []).
filter('istLandCheck', function() {
return function(orte,istLand) {
var out=[];
angular.forEach(orte, function(ort,value){
if(ort.istLand==1){
out.push(ort);
}
});
return out;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="Ctrl">
<div ng-repeat="ort in orte|istLandCheck">
{{ ort.ortsname }}
</div>
</div>
</body>
Related
I'm trying to get multiple Angular Material checkboxes with the same ng-model. I have two problems: how to get default checked checkboxes, and how to make at least one of these checkboxes to be required. I tried with ng-checked, but then I can't POST the values through the form.
HTML
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10" >
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)">
{{ period }}. sat
</md-checkbox>
</span>{{selected | json}}
</div>
App.js
$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/
$scope.selected = [2];
$scope.toggle = function (period, list) {
var idx = list.indexOf(period);
if (idx > -1) {
list.splice(idx, 1);
}
else {
list.push(period);
}
};
$scope.exists = function (period, list) {
return list.indexOf(period) > -1;
};
Please, help.
Actually your ngModel is an object, so to get selected value rendered on load, you should do the following:
$scope.model = {};
$scope.model.periods = {"2": true};
And to get all selected checkboxes you should iterate over the keys, as below:
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
See it working:
(function() {
angular
.module('app', ['ngMaterial'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.model = {};
$scope.model.periods = {"2": true};
$scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<div class="col-md-12">
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10">
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="model.periods[period]">
{{ period }}. sat
</md-checkbox>
</span>
</div>
<span ng-bind="model.periods | json"></span>
<hr>
<button type="button" class="btn btn-success" ng-click="save()">Save data</button>
</div>
</form>
</body>
</html>
I hope it helps.
I have a factory in angular that will retrieve all data from the database as JSON data as below.
[{"part_no":"aaa","descr":"aaa123"},{"part_no":"bbb","descr":"bbb123"},{"part_no":"ccc","descr":"ccc123"},{"part_no":"ddd","descr":"ddd123"}]
How can i just filter, lets say the record with part_no : aaa and descr:aaa123 only?
maybe something like $scope.data = data | filter:part_no:aaa;
Here's an example of how to filter both within JavaScript and within the view:
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.data = [{"part_no":"aaa","descr":"aaa123"},{"part_no":"bbb","descr":"bbb123"},{"part_no":"ccc","descr":"ccc123"},{"part_no":"ddd","descr":"ddd123"}];
$scope.filteredData = $scope.data.filter(function(d) {
return d.part_no === 'aaa' && d.descr === 'aaa123'
});
});
.section {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
<div class="section">
<h3>unfiltered data:</h3>
<div ng-repeat="item in data">Part: {{item.part_no}}, Description: {{item.descr}}</div>
</div>
<div class="section">
<h3>pre-filtered data in JavaScript:</h3>
<div ng-repeat="item in filteredData">Part: {{item.part_no}}, Description: {{item.descr}}</div>
</div>
<div class="section">
<h3>filtered data in view:</h3>
<input ng-model="partFilter" placeholder="part filter" />
<input ng-model="descrFilter" placeholder="description filter" />
<div ng-repeat="item in data | filter:{part_no: partFilter, descr: descrFilter}">Part: {{item.part_no}}, Description: {{item.descr}}</div>
</div>
</div>
I am newbie to angular. I have two scope variables i.e,$scope.jsonData and $scope.dbdatas. I want to show value from $scope.jsonData corresponding to $scope.dbdatas.name. Please check my code. I have mentioned my desire output in the code.
View:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
<!--something like {{dbdata.name}} : <span show-value class="list_text">{{dbdata.value}}</span>-->
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
/*app.directive('showValue',function(){
return{
restrict:'A',
link:function(scope,ele,attr){
}
}
});*/
Current Output
MoliRet : L
MoliRet : R
Eleget : M
Desire Output
MoliRet: Let
MoliRet: Ret
Eleget: More than once
Working Fiddle
HTML:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="item in jsonData">
<div ng-repeat='option in item.options'>
<div ng-show="isInArray(option.key)">
{{item.name}}: {{option.value}}
</div>
</div>
</div>
</div>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.isInArray = function(key){
var returnValue = false;
for(var i=0;i<$scope.dbdatas.length;i++){
if($scope.dbdatas[i].value==key){
returnValue = true;
break;
}
}
return returnValue
}
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
Output:
Eleget: More than once
MoliRet: Let
MoliRet: Ret
Hope that solve your problem.
You can use angular.ForEach to match data from both scope variables and push the data to an array $scope. Please take a look at the solution below.
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
</div>
</div>
<div ng-repeat="expect1 in expectations">{{expect1.name}}: {{expect1.value}}</div>
</div>
</div>
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
$scope.expectations= [];
angular.forEach($scope.dbdatas,function(value1){
angular.forEach($scope.jsonData,function(value2){
if(value1.name == value2.name){
angular.forEach(value2.options,function(value3){
if(value3.key == value1.value){
$scope.expectations.push({
"name" : value2.name,
"value": value3.value});
}
});
}
});
});
Expected output will be
MoliRet: Let
MoliRet: Ret
Eleget: More than once
I would suggest you have to store a unique options table in one json and use angular custom service filter to handle the relative key 'look at the plunker'. you can use this custom filter in any controller and view.
Here is custom filter
app.filter('myFilter', ['$filter', function ($filter) {
return function (data, param) {
var output = $filter('filter')(data, {key:param},true);
return (param && output.length) ? output[0].value : '';
};
}]);
Here is a working plunker
.Hope that help.
here is my code , i dont know what mistake i am doing??? Is there a built in filter or function to sort array of integers or numbers??
<body data-ng-app="app" data-ng-controller="controller1" >
<div class="container">
<div class="row">
<input type="text" ng-model="searchbox" />
<li ng-repeat="num in numbers|filter:searchbox|orderBy:number">
{{num}}
</li>
</div>
</div>
<script type="text/javascript">
var app=angular.module('app', []).controller('controller1', ['$scope', function($scope){
$scope.numbers=[10,8,6,7];
$scope.number=function(data)
{
return data.sort();
}
}
]);
</script>
</body>
Check out this answer orderBy array item value in Angular ng-repeat
This means that you can do something like this:
app.controller('ctrl', ['$scope', function($scope){
$scope.numbers = [10,8,6,7];
$scope.identity = angular.identity;
}]);
And
<li ng-repeat="num in numbers | orderBy:identity">
{{num}}
</li>
I'm binding the array data using reference $index but i'm getting arrays in group2 and value
I need like this:
grp1
abc,def
value1,value2
grp2
adf,cdf
value3,value4
But Im getting :
grp1
["abc","def"]
[["value1","value2"]]
grp2
["adf","cdf"]
[["value3","value4"]]
Below code i tried
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-app ng-controller="ListCtrl" ng-cloak>
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{group2[$index]}}</li>
<li>{{value[$index]}}</li>
</ul>
</div>
</body>
</html>
Script:
function ListCtrl($scope) {
$scope.group1 = ['grp1', 'grp2'];
$scope.group2 = [['abc', 'def'],['adf','cdf']];
$scope.value = [[['value1','value2']],[['value3','value4']]];
}
Try hardcoded way:
<div ng-controller = "fessCntrl">
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{group2[$index][0]}} {{group2[$index][1]}}</li>
<li>{{value[$index][0][0]}} {{value[$index][0][1]}}</li>
</ul>
</div>
Demo Fiddle
But if you want to invoke controller, I would write:
<div ng-controller = "fessCntrl">
<ul ng-repeat="group in group1">
<li>{{group}}</li>
<li>{{printGroup(group2[$index])}}</li>
<li>{{printGroup(value[$index])}}</li>
</ul>
</div>
and method:
$scope.printGroup = function (group) {
var buff = '';
angular.forEach(group, function(val){
buff = buff + ' ' + val
});
return buff;
};
Demo 2 Fiddle