I want to create a dynamic model in angularjs. There is not seem to be a way to work as i want. I tried to declare as array but not even then worked
Controller
$scope.cccdirect = {}
$scope.items = [
{
id: 1231
title: "Product 1"
qty: 2
price: "25"
subtotal: "50"
direct = true
}
.....
]
View
<tr ng-repeat="item in items">
<select data-ng-model="cccdirect[item.id][direct]">
<option value="1000">Απομακρυσμένο κατάστημα</option>
<option value="1001">Άμεση Ενδοδιακίνηση</option>
<option value="1002">Εβδομμαδιαία Ενδοδιακίνηση</option>
</select>
<select ng-model="cccdirect[item.id][sendtype]" ng-options="t.title for t in types" data-ng-change="checkForCompaniesRow(item.id)"></select>
<select data-ng-show="cccdirect[item.id][show_companies]" ng-model="cccdirect[item.id][sendcompany]" ng-options="t.title for t in companies"></select>
<select data-ng-show="cccdirect[item.id][show_ktel]" ng-model="cccdirect[item.id][sendktel]" ng-options="t.title for t in ktel"></select>
</td>
</tr>
What i want is to get a model looked like this:
cccdirect = {[
item.id --> 1251:{
direct:1000,
sendtype:1002,
sendcompanies:23,
sendktel:0
},
item.id --> 2572:{
direct:1000,
sendtype:1002,
sendcompanies:23,
sendktel:0
},
]}
Related
I'm having an issue with a selection box. When I select the option I can't get the value that I just selected. I read a lot of answers, but none of them seems to work for me. Here is my code.
HTML:
<select class="wide" style="width: 96%;height: 100px;"
ng-options="element as element.type for element in elements"
ng-model="selectedType" >
<option value="">Choose an option</option>
</select>
<p> {{selectedType}} </p>
Controller:
elements:[
{
desc: "example1",
article: "OF",
type: "example1Type"
},
{
desc: "example2",
article: "P-8955625",
type: "example2Type"
}
];
$scope.selectedType = "";
The <p> {{selectedType}} </p> shows nothing.
Thanks in advance
The as its only for the display value, but for the ng-model present the entire selected item.
so you need wirte:
<p> {{selectedType.type}} </p>
https://embed.plnkr.co/bicmN1loBGdcxsWOLv6x/
elements needs to be set in the controller scope. e.g.
app.controller('ExCtrl', function($scope) {
$scope.elements = [{
desc: "example1",
article: "OF",
type: "example1Type"
}, {
desc: "example2",
article: "P-8955625",
type: "example2Type"
}];
});
Also, attach the controller to your view. e.g.
<body ng-controller="ExCtrl">
<select class="wide"
ng-options="element.type for element in elements"
ng-model="selectedType" >
<option value="">Choose an option</option>
</select>
<p>{{selectedType}} </p>
</body>
Et voila!
See the repl
I want to create a select tag with 'selected' value. I am doing this with ng-repeat since I cannot add a custom directive to ng-options. This is the code.
<select class="ng-valid ng-dirty" ng-model="selectedCity">
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
This adds an extra option with value =?string:1? which I searched a lot. Since ng-options solves this issue, I however have to add the directive after-render-cities for each option. How can I solve this issue?
Use this
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-options="city.id as city.name for city in allCities">
</select>
for selection of first value, write following code in your controller
$scope.selectedCity = $scope.allCities[0].id;
use ng-init for solve value =?string:1?
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-init='selectedCity=allCities[0].id'>
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
another choice you can use ng-selected fiddle
<option ng-repeat="(key,city) in allCities" ng-selected='key==0' value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
You can create a custom directive, using select and ng-options.
Snippet:
JS:
template: "<select ng-options='item.id as item.name for item in list' ng-model='data'></select>",
HTML:
<div select-option list="list" ng-model='data'></div>
Refer to the demo here.
Try this code
Java Script
var app = angular.module('myApp', []);
app.controller('SampleController', function ($scope) {
$scope.Cities = [
{ Id: 1, Name: "New York" },
{ Id: 2, Name: "Colombo" },
{ Id: 3, Name: "Real Madrid" },
{ Id: 4, Name: "Bostan" },
{ Id: 5, Name: "Birmingham" }
];
$scope.City= 3;
});
HTML
<select ng-options="C.Id as C.Name for C in Cities" ng-model="City"></select>
Read This Blog, it has everything explained.
I have an array of models. I start with one model, then copy that model and push it to the stack. My view shows the array of models in one page.
But the view for the copied models isn't correct. More specifically the <select> isn't displaying the correct value.
Controller:
$scope.colors = [
{
id: 1,
name: 'Green'
},
{
id: 2,
name: 'Red'
}
];
var itemModel = {
name: '',
color: null
};
$scope.items = [
angular.copy(itemModel)
];
$scope.copyItem = function(item) {
$scope.items.push(angular.copy(item));
};
Plunker: https://plnkr.co/edit/sVBL9j3JmCjdLZtr7HCH?p=preview
Any suggestions?
How about this:
<select ng-model="item.color" ng-options="color.name as color.name for color in colors">
<option value="">None</option>
</select>
Try this:
<select ng-model="item.color" ng-options="color as color.name for color in colors track by color.id">
<option value="">None</option>
</select>
I'd like the active state of items in one drop-down list to be contingent on properties from a second model:
angular.module('mainApp')
.controller('MainCtrl', function($scope) {
$scope.departments = [
{id:0, name: 'Dry Goods'},
{id: 1, name:'Frozen Food'},
{id: 2, name:'Electronics'}
];
$scope.categories = [
{id: 0, name: 'cereal', departmentId: 0},
{id: 1, name: 'cookies', departmentId: 0},
{id: 2, name: 'televisions', departmentId: 2}
];
});
and the drop-downs:
<select ng-model="department" ng-options="department.name for department in departments" ng-change="changeDepartment()">
<option value="">Department</option>
</select>
<select ng-model="category" ng-options="category.name for category in categories" ng-change="changeCategory()">
<option value="">Category</option>
</select>
I'd like the Department drop-down to display all three items, but only 'Dry goods' and 'Electronics' should be selectable because there are items in Category that map to Department through the departmentId property. Frozen food should be grayed out.
Plunker : http://plnkr.co/edit/c7rZ05qqRCnB7L0ANgZ4?p=preview
Thanks in advance.
Just use the $filter 'filter' in your second select, fike this:
<select ng-model="category" ng-options="category.name for category in categories|filter:{departmentId:department.id}" ng-change="changeCategory()">
<option value="">Category</option>
</select>
Example
UPDATE
Since ng-options doesn't provide a functionality for indicating which values should be disabled, you only have 2 options:
Create a custom directive that will give you that option, this is not an easy task because that directive should be watching for the collection of the ng-select and the collection or selected value of the other select, in other words this: ng-options with disabled rows won't work for you.
Build your select with an ng-repeat, much easier, like this:
.
<div ng-controller='MainCtrl'>
<div class="btn-group">
<select ng-model="departmentID" ng-change="changeDepartment()">
<option value="">Category</option>
<option ng-repeat="department in departments" value="{{department.id}}" ng-disabled="(categories|filter:{departmentId:department.id}).length==0">{{department.name}}</option>
</select>
</div>
<div class="btn-group">
<select ng-model="categoryID" ng-change="changeCategory()">
<option value="">Category</option>
<option ng-repeat="category in categories" value="{{category.id}}" ng-disabled="departmentID!=category.departmentId">{{category.name}}</option>
</select>
</div>
</div>
Example
Basic 'shopping cart' scenario.Users should be choosing their desired products in a form environment. Every product has a core price and multiple additional options available which change the price when selected.
Products and options are shown in two SELECT fields which are getting populated like this:
$scope.products = [
{
name:'Product A',
cost:5,
options: [{name:"Option 1", value:10}]
},
{
name:'Product B',
cost:10,
options: [{name:"Option 1", value:10},{name:"Option 2", value:15}]
}
];
$scope.cart = {
items: [{
qty: 1,
}]
};
and
<tr ng:repeat="item in cart.items">
<td>
<div class="type-select">
<select ng-model="item.product" ng-options="p.name for p in products"></select>
</div>
</td>
<td>
<div class="type-select">
<select ng-model="item.option" ng-options="o for o in item.product.options.name" ng- disabled="!checked">
</div>
</td>
<td>
<input ng:model="item.qty" value="1" size="4" ng:required="" ng:validate="integer" class="ng-pristine ng-valid ng-valid-required input-mini">
</td>
<td>
{{calculate()}}
</td>
</tr>
How can i set default value for the cart items?
You can have a watch on items.
As soon as an item is added, you should assign that item's product to be the first product. Something like that:
$scope.$watchCollection('cart.items', function(newValue, oldValue){
var changedItem = newValue[newValue.length-1];
changedItem.product = $scope.products[0];
});
Of course, that would be assuming you know that $scope.products is an array and that it is not empty. You can have some checks for that. Anyway, I think it is weird to have default values for that but there is a way for you.