I want to populate the selected color as selected option in selectbox in initially
link of jsfiddle
here is my partial :
<div ng-app ng-controller="QuestionController">
<ul ng-repeat="product in products">
<li>
<div>{{ product.selected | json }}</div>
<select ng-model="product.selected" ng-options="color.name for color in product.color"></select>
</li>
</ul>
</div>
controller :
function QuestionController($scope) {
$scope.products = [
{
"name": "product1",
"value": "product1",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'Green', id: 11 }
},
{
"name": "product2",
"value": "product2",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'red', id: 10 }
},
{
"name": "product3",
"value": "product3",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'Blue',id: 12 }
}
];
}
Try this:
<select ng-model="product.selected" ng-options="color.name for color in product.color track by color.id"></select>
Related
In my Vue components, I have two array called categories and product which is coming from the DB. The categories array is an array of objects like its have id, type, name, value, and products array also have id, type, name, parent_id, value.
parent_id in products is the id of categories. I want to show the products based on categories in the select option. like If categories type A then products will be B, C, D, or If categories type B then products will be X, Y, Z.
How can I do that?
Step 1: Create an html template with select option
<template>
<div id="app">
<div class="row">
<label>Category </label>
<select #change="onChangeCategory" v-model="selectedCategory">
<option value="">Select Category</option>
<option
v-for="(category, index) in categories"
:key="index"
:value="category">
{{ category.name }}
</option>
</select>
</div>
<div class="row">
<label>Product </label>
<select v-model="selectedProduct">
<option value="">Select Product</option>
<option
v-for="(product, index) in filteredProducts"
:key="index"
:value="product">
{{ product.name }}
</option>
</select>
</div>
<p v-if="selectedCategory">Selected Category {{ selectedCategory }}</p>
<p v-if="selectedProduct">Selected Product {{ selectedProduct }}</p>
</div>
</template>
Step 2: Create an model data
data() {
return {
selectedCategory: "",
selectedProduct: "",
filteredProducts: [],
categories: [
{
id: 1,
type: "Food",
name: "Food",
value: "Food",
},
{
id: 2,
type: "Drinks",
name: "Drinks",
value: "Drinks",
},
],
products: [
{
id: 1,
type: "Food",
name: "Chiken 65",
parent_id: 1,
value: "001",
},
{
id: 2,
type: "Food",
name: "Magie",
parent_id: 1,
value: "002",
},
{
id: 3,
type: "Food",
name: "Mutton Roast",
parent_id: 1,
value: "003",
},
{
id: 4,
type: "Drinks",
name: "Pepsi",
parent_id: 2,
value: "004",
},
{
id: 5,
type: "Drinks",
name: "Beer",
parent_id: 2,
value: "005",
},
{
id: 6,
type: "Drinks",
name: "7Up",
parent_id: 2,
value: "006",
},
],
};
},
Step 3: Add an onChange event for category
methods: {
onChangeCategory() {
this.selectedProduct = "";
this.filteredProducts = this.products.filter((item) => {
return item.parent_id === this.selectedCategory.id;
});
},
},
DEMO
I am new to AngularJs and Google charts. My requirement is to show Google charts dynamically in ng-repeat for each li.
<li ng-repeat="ques in surveyquestions">
<label for="{{ques['questions']}}">
{{ques['id']}} {{ques['questions']}}
</label>
<div ng-init="calltry(ques['option_array'],ques['id'])"></div>
<div id="chartdiv{{ques['id']}}"></div>
</li>
In above code through ng-init I pass the data to render the Google chart. In JavaScript I used as below but it's not working.
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'+id));
It's working fine when id is static like below.
<div id="chartdiv"></div>
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
Please help to sort out what is the issue.
Try with angular-google-chart,
Refer :https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/
<div class="chartContainer" ng-repeat="data in arrayDiv">
<div layout-padding layout-margin google-chart chart="drawChart(data)">
</div>
</div>
$scope.drawChart = function (value) {
$scope.chartData = [];
var chartValue = {
c: [{
v: 'subject
}, {
v: 5,
f: " questions"
}, {
v: 6,
f: " questions"
}]
};
$scope.chartData.push(chartValue);
$scope.qaChart = {};
$scope.qaChart.type = "BarChart";
$scope.qaChart.data = {
"cols": [{
id: "Sections",
label: "Subject",
type: "string"
}, {
id: "Correct",
label: "Correct",
type: "number"
}, {
id: "Wrong",
label: "Wrong",
type: "number"
}],
"rows": $scope.chartData
};
$scope.qaChart.options = {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"colors": ['#4CAF50', '#EF5350', '#00adee'],
"vAxis": {
"title": " Questions",
},
"hAxis": {
"title": "Details",
}
};
return $scope.qaChart;
};
Does angular-schema-form have a method to show preselected values?
When the titleMap on the select will set an integer, preselected values will show. But if it will set an object, I found no way of showing the correct name.
Is there anything to tie the object to, like with ng-options where you can set an attribute to compare them with the "track by" clause?
ng-options="option as option.name for option in array track by option.id"
In my example code, cats1 will set an object, cats2 will set an integer.
HTML:
<body>
<div ng-controller="MainCtrl">
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model">
</form>
</div>
</div>
</body>
Controller:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.form = [
{
key: 'cats1',
type: 'select',
titleMap: [
{value: {id: 0, name: "Leopard"}, name: "Leopard"},
{value: {id: 1, name: "Tiger"}, name: "Tiger"}
]
},
{
key: 'cats2',
type: 'select',
titleMap: [
{value: 0, name: "Leopard"},
{value: 1, name: "Tiger"}
]
}
];
$scope.schema = {
"type": "object",
"properties": {
"cats1": {
"title": "Cats",
"type": "object"
},
"cats2": {
"title": "Cats",
"type": "number"
}
}
};
$scope.model = {cats1: {id: 1, name: "Tiger"}, cats2: 1};
}]);
Here is a plunkr:
https://plnkr.co/edit/0hK5Hrc9GXklfRwa6fjE?p=preview
I have a problem with filter my data by category selected by dropdownlist.
Here how looks like my controller:
var category = {
"Dairy": 1,
"Bread": 2,
"Drink": 3,
"Spices": 4,
"Meat": 5
}
$scope.categories = [
{ text: "All", value: 0 },
{ text: "Dairy", value: 1 },
{ text: "Bread", value: 2 },
{ text: "Drink", value: 3 },
{ text: "Spices", value: 4 },
{ text: "Meat", value: 5 }
];
$scope.products = [
{ name: "Milk", value: 3.28, avaible: true, expireDate: "2016-04-29", category: category.Dairy },
{ name: "Serek wiejski", value: 1.28, avaible: false, expireDate: "2016-04-26", category: category.Dairy },
{ name: "Coca-cola", value: 6.98, avaible: true, expireDate: "2017-04-29", category: category.Drink },
{ name: "Corn", value: 0.99, avaible: true, expireDate: "2016-09-19", category: category.Spices },
{ name: "Ham", value: 9.00, avaible: true, expireDate: "2016-04-29", category: category.Meat },
{ name: "Bread", value: 3.78, avaible: true, expireDate: "2016-04-29", category: category.Dairy }
];
Here is HTML
<select ng-model="selectedCategory">
<option ng-repeat="cat in categories" value="{{cat.value}}">
{{cat.text}}
</option>
</select>
<div ng-repeat="product in products | filter: product.category == selectedCategory">
After I change value of dropdown the products are not being filtered. Just for id = 5 it works as expected.
Is condition product.category = selectedCategory wrong?
try this
<div ng-repeat="product in products | filter:{category:selectedCategory}">
so, i have a select list and I am trying to select the item dynamically. The thing is, even doe the expression is evaluated to "true" the option is still not being selected
<label for="articlePage">Page:</label>
<select class="form-control pageList" name="articlePage" required="" ng-model="article.page_ID">
<option ng-repeat="page in pages" ng-selected ="{{page.id == article.page_ID}}" value={{page.id}}>{{page.name}}</option>
</select><br>
the scope(pages):
$scope.pages = [
{ name: "Home", id: "1" },
{ name: "Plugs", id: "2" },
{ name: "Pack Bedding", id: "3" },
{ name: "Pot Bedding", id: "4" },
{ name: "Poinsettias", id: "5" },
{ name: "Sales", id: "6" },
{ name: "Process Quality", id: "7" },
{ name: "Environment", id: "8" },
{ name: "Process Technology", id: "9" },
{ name: "Process Control", id: "10" },
{ name: "Infrastructure", id: "11" },
{ name: "News", id: "12" },
{ name: "About", id: "13" },
{ name: "Contact", id: "14" },
{ name: "Find Us", id: "15" },
{ name: "Key Personnel", id: "16" },
{ name: "Recruitment", id: "17" },
{ name: "Legal Information", id: "18" },
{ name: "Hidden", id: "19" }
];
there is also an service that is retrieving my articles, i know i get that right and like i said, the expression is being evaluated. here is a print screen to prove that:
does anyone have any idea why the option isn't being selected?
Thank you! :)
You don't need expression inside the ng-selected! Try this:
<label for="articlePage">Page:</label>
<select class="form-control pageList" name="articlePage" required="" ng-model="article.page_ID">
<option ng-repeat="page in pages" ng-selected ="page.id == article.page_ID" value="{{page.id}}">{{page.name}}</option>
</select><br>