I have a multidimensional array that holds the product names and versions.
I want to create an interface that lets the user select the product from a select box, and then the version number in the second select box. The second select box should only show the versions numbers of the product that the user selected in the first select box.
This is my mutidimensional array:
[Object]0:
name: "Product 1"
versions: [Array]0:
number: "1.0"
number: "1.5.2"
1:
name: "Product 2"
versions: [Array]0:
number: "0.0"
number: "0.5"
The user has the option to choose multiple products, so I created an array to hold the users selection.
my controller is setup like this:
app.controller('mainController', function ($scope) {
$scope.products = [{id: 1, name: '', versions: []}];
$scope.packages = [];
$scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
$scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};
$scope.addProduct = function(){
var id = $scope.products.length + 1;
$scope.products.push({id: id, name: "", version: []});
};
});
And the select boxes are setup like this with angularjs:
<div ng-repeat="product in products">
<label>Product</label>
<select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>
<label>Version</label>
<select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
</div>
<button ng-click="addProduct()">Add Product</button>
What I tried to do was setup the ng-options to select the versions object of the current product. But this doesn't work.
I created a jsFiddle of what I currently have:
http://jsfiddle.net/rkyu4rjq/
I would really appreciate any suggestions on how to link the version select box with the product selected.
TIA
Eventhough I'm not really keeping track of which version chosen for each product I fixed your relative select options.
You can find a solution here. This should get you on your way!
I missed something very simple.
In the version select box binding I should of used version.number for version in product.product.versions instead of version.number for version in product.versions
Here is a working jsFiddle: http://jsfiddle.net/rkyu4rjq/2/
Related
I have a js file containing array and objects. I need to style some properties from these arrays. For example
myArray= [
{
id: 1,
name: 'honda',
description: 'to buy the latest car, click here'
},
{
id: 2,
name: 'tesla',
description: 'to buy the latest car, click here'
}
]
Let's say I want to style the description property so that I can bind a link there.
I figure that the way to do it is to use raw html. But in my case, I'm going to include it to my array. Is this possible? I have tried to search this question everywhere but there's no explanation for this case. Thank you so much.
You can use any html styled code in your Array such as below.
myArray= [
{
id: 1,
name: 'honda',
description: 'to buy the latest car, click here'
},
{
id: 2,
name: 'tesla',
description: 'to buy the latest car, click here'
}
]
And in your templete you would use: like
...
<div v-for="car in myArray" :key="car.id">
<p v-html="car.description"></p>
</div>
Check out this code.
Check out this codepen.
You can check out the vuejs documentation for more info.
so I have a dropdown and added some values as shown below.
I want the program to do stuff based on the selected options from drop box.
angular.module('priceCalculator', [])
.controller("mainCtrl", ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: 0, name: 'Please Select'},
{id: 1, name: 'PVC Red Extra'},
{id: 2, name: 'Alu Standard'},
{id: 3, name: 'SKS Classic Decor'},
{id: 4, name: 'SKS Aluminiu Alb'}
],
selectedOption: {id: 0, name: 'Please Select'}
};
}]);
I was thinking I could do it with a switch statement
$scope.doStuff = function() {
switch(id from availableOptions) {
case 0:
// do stuff, I want to read file based on inputs I shall also get from user
break;
default:
// do stuff
};
};
How do I need to do this? Sorry if it's easy for everybody, I'm really noob at coding
Here's the html section
<label>Select Shutter Type</label>
<!-- Use ngOption to select shutter type -->
<select ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption">
</select>
If i understand correctly, you would like your doStuff function to be called when the selection changes. You can use ng-change to do that:
<select
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"
ng-change="doStuff(option)">
Then you can declare doStuff like this:
$scope.doStuff = function(selectedOption) {
i need one help.I need to remove a particular row from a table using Angular.js .Here i have + and - button implementation.I have all my code inside https://plnkr.co/edit/D3UrDYwiglMKQyCW0wvW?p=preview
From the Plunkr suppose for Monday i did 3 entries using + button.when i am deleting the middle(second) row using - button this is deleting but it doing null to the 3rd row subcategory field and also displaying the different subcategory which is not belongs to that row category part.Here i need when user will delete any row that row value will delete not other row.All codes are present inside plunkr.Please help me.
I forked your plunker here
Some of the changes:
Defined listOfSubCategory in the controller as an array rather than having a function build it for each category.
Controller:
$scope.listOfSubCategory = [{
id: 1,
name: 'SubCategory 1',
value: 1,
category: 1
}, {
id: 2,
name: 'SubCategory 2',
value: 2,
category: 2
}, {
id: 3,
name: 'SubCategory 3',
value: 3,
category: 3
}, {
id: 4,
name: 'SubCategory 4',
value: 4,
category: 4
}];
Changed ng-options to filter the subcategories based on selected category.
HTML
ng-options="sub.name for sub in listOfSubCategory | filter:{ category: answer.category.id}"
Also, made some other minor changes, like having only on for all 's rather than one for each and used "track by $index" where needed.
I have a strange problem with data-binding on select.
Here are the definitions of my objects :
brands =
[
{
$$hashKey: "object:18"
firm: Object
id: 242
name: " CONTAGEL "
regex: null
},
...
]
products =
[
{
$$hashKey: "object:7"
brand:
{
$$hashKey: "object:613"
firm: Object
id: 32
name: "Level Junior Solaire"
regex: null
}
label: "Level Junior Solaire - LL LEJUS1501"
productCode: "01646554"
},
...
]
I have a list of brand and a list of products. Each product have a brand (pulled from the brand array).
I want to display the list of product with a select for changing the brand.
<div ng-repeat="p in products">
Product : {{p.productCode}}
<select ng-model="p.brand" ng-options="b as b.name for b in brands">
</div>
The option list is filled with the brand list but not any value is selected. And when i change the value of the select, it changes the brand of the product.
So I don't understand what I have missed.
The issue is with your ng-options. ng-model on select boxes uses references, so unless the object is the same reference, it's not going to be selected by default. In your case, it's a new object and therefore not the same reference, so in ng-model's eyes, it's not a match. Use track by to match on the id.
ng-options="b.name for b in brands track by b.id"
The brand object from Brands variable is different from the brand object of the products variable as you can see in your example.
I'm using UI-Select (select2 theme) with an array of data which is returned in the following form:
Array of Objects [
0: Object {
category: "Category name, to be used as optgroup label",
options: [
0: Object {
id: 5,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 6,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 7,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
1: Object {
category: "Another category name, to be used as second optgroup label",
options: [
0: Object {
id: 44,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 45,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 47,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
]
My function to create optgroups:
$scope.createOptGroups = function(item){
return item.category;
};
and it does indeed create my optgroups properly.
The issue here is the following. To be able to create optgroups I need to be at this level:
<ui-select multiple ng-model="diseaseObject.chosenDiseases.states">
<ui-select-match placeholder="Start typing disease name or click in the box...">{{$item}}</ui-select-match>
<ui-select-choices
group-by="createOptGroups"
repeat="state in diseaseObject.allStates | filter: $select.search track by $index">
{{state}}
</ui-select-choices>
</ui-select>
If you wonder what is the outcome of this code, take a look at this pic: http://screencast.com/t/S2VBuK1jXtA
So obviously the data is there but needs to be narrowed down to the desired diseaseName property.
But... If I do that I'm going to lose the optgroups! I will no longer be at the level where category property is available.
Another idea would be to narrow on the state like: state.options. But then the value is still an array of objects that needs iteration over itself. However, if there's an option to implement yet another repeater for the actual options (with the intention to achieve something like <span ng-repeat="name in state.options">{{name}}</span> - that would do it. I have already tried but the directive (ui-select) doesn't like it.
They have an official demo for this group-by stuff but in this particular case the function just creates optgroups as custom strings (letter spans) which is pretty different from my problem.
See the example at the very bottom: http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview