I want to know how to get value in array in *ngFor. First I use *ngFof to get item list. Second I use commonService.indexKey$.getValue() to check id in commonService.quantityList$.getValue() available or not
This is my code
HTML
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()== item.id?item.quantity - commonService.indexKey$.getValue().count:item.quantity}}</label>
</div>
Example data
commonService.quantityList$.getValue()
quantity = [
{ id:1, quantity:100 },
{ id:2, quantity:200 },
{ id:3, quantity:30 }
];
commonService.indexKey$.getValue()
indexCount = [
{id: 1,count: 2},
{id: 2,count: 3},
{id: 3,count: 4},
]
Not sure what are you trying to do in your label really because seems you are making a comparison “==“ so the label will output “true” or “false”. Is that what you really want?
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()[i]== item.id?item.quantity - commonService.indexKey$.getValue()[i].count :item.quantity}}</label>
</div>
Related
I have two json objects (data1 and data2) that have related information. Namely, both objects have properties (arrays) which in turn can have identical data. So, I am trying to figure out how to display those data with highlighting them properly, i.e. identical data with green color and non-identical with red color. Somehow it wrongly highlights all data with red color.
Here is the html:
<ul>
<li ng-repeat="item in vm.data2.features"
ng-class="vm.data1.features.indexOf(item) !== -1 ? 'check' : 'uncheck'">
<span ng-bind="item.id"></span>
</li>
</ul>
and objects:
vm.data1 = {
id: '4569',
name: 'Given data',
features: [
{id: "TEST_TEXT2", desc: 'smth12'},
{id: "TEST_PPP", desc: 'smthsmthsmth'},
{id: "TEST_ECASH", desc: "somelongtexthere"}
]
};
vm.data2 = {
id: '1305',
name: 'Base data',
features: [
{id: "TEST_BP", desc: 'smth'},
{id: "TEST_TEXT2", desc: 'smth12'},
{id: "TEST_PPP", desc: 'smthsmthsmth'},
{id: "TEST_TEXT1", desc: 'blahblah'},
{id: "TEST_ECASH", desc: "somelongtexthere"}
]
};
The full demo is here.
Any help would be appreciated.
Indexof() method will look for similarity in object references not the id itself. findIndex() method can help you here instead.
vm.hasFeature = function(item){
var hasElements= vm.data1.features.findIndex(function(e){
return e.id == item.id;
});
console.log(item, hasElements);
return hasElements;
}
And in html
<li ng-repeat="item in vm.data2.features"
ng-class="vm.hasFeature(item) > -1 ? 'check' : 'uncheck'">
vm.hasFeature = function(item){
var hasElements= vm.data1.features.findIndex(function(e){
return e.id == item.id;
});
console.log(item, hasElements);
return hasElements;
}
CodePen Link: https://codepen.io/anon/pen/ewgLBN?editors=1010
None of the objects will be the same because indexOf(item) will compare object references of item. You'll need to do a deep equals comparison of the items.
i.e.
{id: "TEST_TEXT2", desc: 'smth12'} === {id: "TEST_TEXT2", desc: 'smth12'} // false
vm.data1.features[0] === vm.data1.features[1] // false
Example using lodash would be something like:
_.some(vm.data1.features, otherItem => _.isEqual(item, otherItem))
Because
_.isEqual(vm.data1.features[0], vm.data2.features[1]) // true
Docs for Lodash:
_.some
_.isEqual
I want to filter the values of a <select>.
I have a table with first column <select> .
For eg: object for the <select> is
JSON:
json1 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}, {id: 3, name: 'XYZ'}, {id: 4, name: 'ASD'}, {id: 5, name: 'QWE'}]
json2 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}]
My requirement is: We need to show values from json1 in ng-options but which object should not be there in json2.
For eg: First 2 rows will be filled with json2. So we need to provide options 'XYZ' 'ASD' and 'QWE' in the following rows.
Suppose if name 'XYZ' is selected in the dropdown of the third row. then 4th row <select> should show only 'ASD', and 'QWE'. Similarly what ever object selected in other rows shouldn't be shown in option of other rows dropdown.
I have tried something like this
<select ng-model="obj"
ng-options="obj.id as obj.name for obj in json1 | myFilter:json2">
</select>
myApp.filter('myFilter', function(json2) {
return function(json1) {
var filtered = [];
json1.forEach((d) => {
var exists = false;
json2.forEach((ad) => {
if(ad.id == d.id) {
exists = true;
}
});
if(!exists) filtered.push(d);
});
console.log(filetered);
return filtered.length > 0 ? filtered : json1;
};
});
In filter console.log() values are filtered correctly as expected. However in ng-options all options from json1 are still available not updated with filtered values.
What's wrong?
Is this what you are looking for?
For example:
<table>
<thead>
<tr>
<th>Unique</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>
<select ng-model="product.unique" ng-options="obj.id as obj.name for obj in (json1 | myfilter:products:$index)">
<option value="">No select</option>
</select>
</td>
<td ng-bind="product.name"></td>
</tr>
</tbody>
</table>
vm.products = [{name: 'Product 1'}, {name: 'Product 2'}, {name: 'Product 3'}, {name: 'Product 4'}, {name: 'Product 5'}];
vm.json1 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}, {id: 3, name: 'XYZ'}, {id: 4, name: 'ASD'}, {id: 5, name: 'QWE'}];
App.filter('myfilter' , [function() {
return function(json1, products, index) {
// Filter all products, except the mime
productsFilter = products.filter(function(product, i) {
return i !== index;
});
// filter those that have not yet been selected
var json1Filter = json1.filter(function(item) {
// ask if there is the id in a product
return !productsFilter.some(function(product) {
return item.id == product.unique;
});
});
return json1Filter;
};
}]);
Example Codepen: https://codepen.io/anon/pen/vMJyLz
I think you have the parameters to your filter slightly wrong. The filter function takes a first parameter as the value to be filtered and the other parameters are the ones after myFilter:.
I'm not 100% sure what you want to happen here, but your filter function is called for each value in the dropdown list and should return a replacement for the given value.
However, your code is returning an array of items. This is not how a filter works in AngularJS.
Your filter needs to be updated to check if the item being passed into the filter should be shown or not, and if not, return false.
You can look at the script example from the AngularJS docs to see how they show to do this, or this other Stack Overflow question/answer.
I am using angularjs-dropdown-multiselect .
code sample:
PLatform : <div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" extra-settings="example13settings"></div>
JS:
$scope.example13model = [];
$scope.example13data = [ {id: 1, label: "David"},
{id: 2, label: "Jhon"},
{id: 3, label: "Lisa"},
{id: 4, label: "Nicole"},
{id: 5, label: "Danny"} ];
$scope.example13settings = { smartButtonMaxItems: 3, smartButtonTextConverter: function(itemText, originalItem) {
if (itemText === 'Jhon') { return 'Jhonny!'; }
return itemText; } };
reference : http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
I want to display label name and dropdown in a single line as below.
But after using multi select api i am unable to display then inline, it displays as below, please let me know how to resolve this.
I found that putting it in a span instead of a div solves the problem.
Try this instead:
Platform
<span
ng-dropdown-multiselect=""
options="example13data"
selected-model="example13model"
extra-settings="example13settings">
</span>
Here is a small example of my html using ng-repeat:
<div ng-repeat="item in vm.templateList | filter: vm.myFilter">
<h3>{{item.Code}}</h3>
</div>
In Js file the vm.templateList is as followed(as an example):
vm.templateList = [{Code: 'a', ID: 1},
{code: 'a', ID: 2},
{code: 'b', ID: 3},
{code: 'c', ID: 4}];
Imagine I want to filter this list for all items that have ID 1 and also items that have ID 2.
What I originaly was doing was like this:
vm.filter = {ID: 1};
But this was I can only filter the list on 1 ID. Can anyone suggest a way?
You can add the following AngularJS filter to your application :
// add a custom filter to your module
angular.module('MyModule').filter('myFilter', function() {
// the filter takes an additional input filterIDs
return function(inputArray, filterIDs) {
// filter your original array to return only the objects that
// have their ID in the filterIDs array
return inputArray.filter(function (entry) {
return this.indexOf(entry.ID) !== -1;
}, filterIDs); // filterIDs here is what "this" is referencing in the line above
};
});
You then declare your filter array in the controller as such :
vm.IDs = [1, 2];
Then your view should look like this :
<div ng-repeat="item in vm.templateList | myFilter: vm.IDs">
<h3>{{item.Code}}</h3>
</div>
You can use something like:
html:
<section>
<div ng-repeat="item in vm.templateList | filter:checkFilterOptions">
<h3>{{item.Code}}</h3>
</div>
</section>
Js:
$scope.vm = {};
$scope.vm.templateList = [
{Code: 'a', ID: 1},
{Code: 'a', ID: 2},
{Code: 'b', ID: 3},
{Code: 'c', ID: 4}
];
$scope.filterOptions = [1,2,3];
$scope.checkFilterOptions = function(value, index) {
return value.ID && $scope.filterOptions.indexOf(value.ID) !== -1;
}
I have this array of objects. that holds somethings like this.
[
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
im iterating thru the array here
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>
The thing item.modifiers model that has an array of this 2 id
[
1,2
]
I want the multi select to auto selected the two ids that are in the item.model
I want the final result to look something like this
Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.modifiers = [
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
$scope.item = {};
// add this for pre-selecting both options
$scope.item.modifiers = [1,2];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>
If I understand the question correctly, you're wanting to pre-select the two options.
To do this you will need to set your ng-model to point to the actual objects you are iterating over.
You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.
Here's the relevant documentation under Complex Models (objects or collections)
https://docs.angularjs.org/api/ng/directive/ngOptions
Something like this should work:
HTML:
<select ng-model="$ctrl.item.modifiers"
ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
multiple chosen class="chosen-select" tabindex="4" >
</select>
JS:
app.controller("my-controller", function() {
var $ctrl = this;
$ctrl.modifiers = [{
id: 1,
name: "Extra Cheese"
}, {
id: 2,
name: "No Cheese"
}];
$ctrl.item = {
modifiers: []
}
$ctrl.$onInit = function() {
const id1 = 1;
const id2 = 2;
for (const modifier of $ctrl.modifiers) {
if (modifier.id === id1 || modifier.id === id2) {
$ctrl.item.modifiers.push(modifier);
}
}
}
}
Here's a pen showing the result:
http://codepen.io/Lahikainen/pen/WooaEx
I hope this helps...