Hi I want to do some like this:
{{item.price.{{comparator}}}}
I mean, take a value from type of price using a {{comparator}} variable.
this is an example of my code (the data is bigger and I have more types of prices):
var items = [
{"name":"Item1",price:{public:10,private:15,other1:16.3,other2:17.5}},
{"name":"Item2",price:{public:20,private:45}},
]
var angularApp = angular.module('angularApp', [
'angularAppControllers',
]);
var angularAppControllers = angular.module('angularAppControllers', []);
angularAppControllers.controller('ComparationCtrl', ['$scope',
function ($scope) {
$scope.comparator = "private";
$scope.data = items;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-App="angularApp">
<div ng-controller="ComparationCtrl">
<select ng-model="comparator">
<option value="public">Public</option>
<option value="private">Private</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
<option value="othern">....</option>
</select>
{{comparator}}
<br />
<ul>
<li ng-repeat="item in data">
{{item.name}} - {{item.price.public}} - <strong>(item.price.{{comparator}})</strong>
</li>
</ul>
</div>
</div>
Hum, assuming item.price and comparator are defined in your $scope, try:
{{ item.price[comparator] }}
Like this: https://plnkr.co/edit/IrheJrHz8eOfb5LmTx7x
angular.module('app', [])
.config(function() {
})
.controller('ctrl', function($scope) {
$scope.obj = {
"name": "Item1",
"price": {
"public": "10",
"private": "15",
"other1": "16.3",
"other2": "17.5"
}
};
$scope.prop = 'public';
});
And the HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="ctrl">
<pre>{{obj.price[prop]|json}}</pre>
<script src="script.js"></script>
</body>
</html>
Basically, {{obj[aPropertyDefinedInScope]}}
Related
I need something like this:
<div ng-repeat="customer in customers">
<select ng-options="option.Name for option in **getOptions(customer.ID)**"></select>
</div>
Is it possible?
Yes , as long as the function is synchronous. Using a filter expression in ng-options is also an alternative
const app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.getNames = () => ["Emil", "Tobias", "Linus"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
<select ng-model=" $ctrl.selectedName" ng-options="item for item in $ctrl.getNames()" size=5>
</select>
<p ng-if=" $ctrl.selectedName">Selected: {{ $ctrl.selectedName}}</p>
</div>
const app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.getNames = () => ["Emil", "Tobias", "Linus"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
<select ng-model=" $ctrl.selectedName" ng-options="item for item in $ctrl.getNames()" size=5>
</select>
<p ng-if=" $ctrl.selectedName">Selected: {{ $ctrl.selectedName}}</p>
</div>
Thank you for your answer. But I can't work it. My code below.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("MainModule", []);
app.controller('TestController', function ($scope, $http, $filter) {
$scope.one = ["Sam", "Samantha", "George"]
$scope.two = ["Jack", "Sandra", "Bill"]
$scope.getOptions = function (id) {
if (id === 1) {
return $scope.one;
}
else if (id ===2) {
return $scope.two;
}
};
});
</script>
</head>
<body ng-app="MainModule" ng-controller="TestController>
<div>
<select ng-options="item for item in TestController.getOptions(1)"></select>
<select ng-options="item for item in TestController.getOptions(2)"></select>
</div>
</body>
</html>
I wants to catch parent name and id on child selection.
Output should be:
$scope.selected = [{"name": "Request1", "id":1,
"status":[{"name":"status1","isSelected":true},
{"name":"status2","isSelected":false}]
}]
Able to get selected child but respective parent not getting.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
]
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
You can utilize the $index for getting the parent name and id.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
var result = [];
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
];
$scope.getParent = function(index, selectedState){
result = [];
var req = {
"name": $scope.requests[index].name,
"id": $scope.requests[index].id,
"status": selectedState
}
result.push(req);
console.log("result",result);
return angular.toJson(result);
};
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
There is object:
$scope.type = {
1 : 'Inside',
2 : 'Outside'
};
HTML ng-options:
<select ng-options="key as value for (key , value) in type" ng-model="selectedType"></select>
I tried:
$scope.selectedType = (UserGlobalService.type == 1) ? $scope.records[1] : $scope.records[2];
Hi this would solve your problem
Index.html
<html lang="en" ng-app='myApp'>
<head>
<title>My AngularJS App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="app.js"></script>
</head>
<body ng-controller ='MainController'>
<div>
<select class="form-control" >
<!-- <option ng-value= "{{item}}" >{{item}}</option> -->
<option ng-repeat="option in type" value="{{option.value}}" ng-selected="type.value == option.value">{{option.value}}
</option>
</select>
</div>
</body>
And your JS should be like this.
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope',
function($scope) {
$scope.type = [{
"id" : 1,
"value" : "Inside"
},{
"id" : 2,
"value" : "Outside"
}];
}
])
I Edited my answer a bit
This is how I would do it:
$scope.types = [
{ id: 1, name: 'Inside' },
{ id: 2, name: 'Outside' }];
$scope.selectedType = $scope.type[0];
HTML:
<select ng-options="t.name for t in types" ng-model="selectedType"></select>
Here's Plunker: http://plnkr.co/edit/uyP5EeOUTQb7n1ymsFuB
I have been trying for days to get a working version of a grouping filter for Angular. The goal is to group and filter a list of items, using dynamic group and search terms. The end product will have two levels of ng-repeats as well as filter terms, but below I've distilled the core issue to just a single ng-repeat and no search filtering.
The issue is described in this question, namely that I get "10 digest" errors in the JS console. I have tried the suggestion in that thread, namely that I use _.memoize(). This works for the initial load, but somehow doesn't update the ng-repeat when I update the model. I'm also unable to determine how "track by" would work for me.
For example code desired output is:
A selected: "One"
B selected: "tres uno"
Here is the version with digest errors (check the JS console), but with output working as desired:
http://plnkr.co/9TJvZk
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}]
return
});
app.filter('myFilter', function() {
return function(items, filter_items) {
return _.groupBy(items, filter_items.group_1);
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in items| myFilter:filter_items">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
And error free, but not updating when model does:
http://plnkr.co/N41D2Y
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}]
return
});
app.filter('myFilter', function() {
return _.memoize(function(items, filter_items) {
return _.groupBy(items, filter_items.group_1);
}
);
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in items| myFilter:filter_items">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
How do I get working dynamic grouping in AngularJS without the digest errors?
you mean like this
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}];
return;
});
app.filter('myFilter', function() {
var m = {};
return function(items, filter_items) {
return (filter_items.group_1 in m) ? m[filter_items.group_1] : (m[filter_items.group_1] = _.groupBy(items, filter_items.group_1) );
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in items| myFilter:filter_items">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
I updated the code above as well as the plunker, just to illustrate your code is workable. But this angular-filter project is awesome, check it out.
The reason for the digest error is that each call to _.groupBy returns a new object, so every time angular checks it against the old value it is different, leading to another digest.
As the list is only filtered when filter_items.group_1 changes, it's simple to watch this in the controller and perform the group by there:
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}];
$scope.$watch('filter_items.group_1', function (group) {
$scope.groupedItems = _.groupBy($scope.items, group);
});
});
Then:
<div ng-repeat="(group1, g_items) in groupedItems">
<h2>{{group1}}</h2>
</div>
I believe you can achieve the same result without using a filter. I have successfully achieved this by using a watcher in the controller and grouping in the watcher function. This doesn't have the 10 digest errors and would work when your selection changes.
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}]
$scope.$watch('filter_items.group_1', function(newValue){
$scope.grouped = _.groupBy($scope.items, newValue)
})
return
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in grouped">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
Below I have code example that will successfully group data based on a model property for an ng-repeat, but only on the initial page load. So for example on load I do
$scope.filter_items.group_1 = 'propb'; , which correctly repeats and groups by propb. Same if I switch it to propa.
The problem is that after the page loads, changing the filter_items model via an input has no effect on he ng-repeat, which doesn't update. I've tried to work a bit with the .$apply() method, but nothing that worked (and from what I read I shouldn't have to use it). How can I get the ng-repeat to redraw after a model input change?
Note: I use the memoize function to avoid Angular digest errors, which will happen without it.
http://plnkr.co/N41D2Y
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}]
return
});
app.filter('myFilter', function() {
return _.memoize(function(items, filter_items) {
return _.groupBy(items, filter_items.group_1);
}
);
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in items| myFilter:filter_items">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
I can't get your code working or then there's just something I don't understand or missed. But if custom filter is giving you headache, why don't you just put simple grouping function inside your controller?
Say, your controller
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.items = [{
id:1,
propa:"one",
propb:"uno"
},{
id:2,
propa:"one",
propb:"uno"
},{
id:3,
propa:"two",
propb:"dos"
},{
id:4,
propa:"two",
propb:"dos"
}];
$scope.notGrouped = angular.copy($scope.items);
$scope.options = ['propa','propb'];
$scope.groupBy = function (option) {
$scope.items = _.groupBy($scope.notGrouped, option);
}
});
and related HTML template
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="selectedOption"
ng-options="option as option for option in options"
ng-change="groupBy(selectedOption)">
</select>
<br><br>
<div ng-hide="!!selectedOption">Not grouped yet...</div>
<div ng-repeat="item in items">
<span>{{ item | json }}</span>
</div>
</div>
</body>
Would give you