I have object (arr) when repeat, he have property charType: select or multiple.
I want if charType is "select" see normal select, but if charType is "multiple" see select with multiple.
Example:
If object (arr) have 5 result 0,1,2 is charType 'select' and 3,4 charType is 'multiple'.I want to see
0 select
1 select
2 select
3 select with multiple
4 select with multiple
<div class="form-group" ng-repeat="att in arr track by $index">
<div class="col-md-3">
<label for="phone" ng-model="type">{{att.name}}</label>
</div>
<div class="col-md-9">
({{att.charType}})
<select class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-if="att.charType == 'select' ? 'multiple' : 'multiple=true'">
<option ng-repeat="itemss in att.value track by $index" value="{{itemss}}">{{itemss}}</option>
</select>
<div class="text-center"><a class="insertStore" data-toggle="modal" data-target="#addCharacteristicValue" ng-click="getObj(att)">Добави</a>
</div>
</div>
</div>
Here is a working snippet :
Use ng-options instead of ng-repeat in option tag
Remove track by index make select fail
Use a simple ng-if to generate two differents select.
There isn't ng-multiple directive it seems, so i went for the ng-if workaround.
angular.module("app", []).controller("ctrl", function($scope){
$scope.arr = [{charType:'select', name:'select', value:[1, 2]},{charType:'multiple', name:'multiple', value:[1,2]}];
$scope.charObj = {characterValue:{}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="form-group" ng-repeat="att in arr track by $index">
<div class="col-md-3">
<label for="phone" ng-model="type">{{att.name}}</label>
</div>
<div class="col-md-9">
({{att.charType}})
<select ng-if="att.charType == 'select'" class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-options="itemss for itemss in att.value">
</select>
<select ng-if="att.charType != 'select'" multiple class="form-control" ng-model="charObj.charactValue[att.businessassetID + $index]" ng-options="itemss for itemss in att.value">
</select>
</div>
</div>
selected : {{charObj.charactValue}} <br />
</div>
Related
I have two select's who uses the same list. When i choose the option "Foo" from select A the same option "Foo" must be hidden on select B. Any ideia how to do it with AngularJS ? I'm trying something like this
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha ">
<option></option>
</select>
</div>
$scope.esconderTestemunhaSelecionada = function(obj){
if($scope.lstTestemunha.includes(obj)){
$scope.lstTestemunha.style.display = "none";
return $scope.lstTestemunha;
}
}
You could use a filter on your second select. This will filter the items in the second select such that the item selected in the first does not appear. If you need it to be more complex (for example, this will cause the second select to not have any options until something is selected in the first select which may be an undesirable side effect) you can always write your own custom filter.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.selectItems = [];
$scope.selectedItemA = {};
$scope.selectedItemB = {};
for (let i = 1; i <= 10; i++) {
$scope.selectItems.push({
id: i,
name: 'Item #' + i
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
Select Item A:
<select ng-model="selectedItemA" ng-options="item as item.name for item in selectItems"></select>
</div>
<div>
Select Item B:
<select ng-model="selectedItemB" ng-options="item as item.name for item in selectItems | filter: { id: '!' + selectedItemA.id }"></select>
</div>
</div>
I solved this problem not the way that i'd like but works fine.
<div class="col-md-6">
<label>
Testemunha 1 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
<option></option>
</select>
</div>
<div class="col-md-6">
<label>
Testemunha 2 :
</label>
<select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" ng-disabled="!notificacaoOrientativa.testemunha1"
ng-options="obj as obj.pessoa.nome for obj in lstTestemunha | filter: {pessoa:{ id: '!' + notificacaoOrientativa.testemunha1.pessoa.id }}">
<option></option>
</select>
</div>
I'm forcing the user to set the first select and filter the second according to the first.
By the way, sry my poor english.
I'm trying to bind selected value in dropdown to my article which has property of same type as dropdowns source is. But somehow when I console log my article there is no value in my property which should hold an selected dropdown value.
Here is my code:
In typescript I have :
article: Article;
mainGroups: Group[];
subGroups: Group[];
On init I'm filling mainGroups and subGroups with data, like this:
ngOnInit() {
this._groupService.getAll().subscribe(groups => this.mainGroups = groups);
this._groupService.getAllSubGroups().subscribe(subgroups => this.subGroups = subgroups);
}
Later in html I'm looping values from my mainGroups and subGroups like this:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Main group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Sub group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Sub group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
As you can see guys I also wrote : [(ngModel)]="article.mainGroup" on first dropdown, and I said also: [ngValue]="group" *ngFor="let group of mainGroups"
So basically this [ngValue]="group" should get value out of *ngFor and store it into article.mainGroup?
But when I do an console log I can not see article.mainGroup property at all, even if it's defined there in article.ts model.. so that means article.mainGroup property is empty ( because is not visible in console.log(article)?
I guess you need something like this:
<select class="form-control" [(ngModel)]="size" name="sizeValue" #sizeValue="ngModel">
<option *ngFor="let size of sizes" [value]="size">{{size}}</option>
</select>
Note the #sizeValue="ngModel"
See my original answer here:
https://stackoverflow.com/a/46866804/1546042
In my application, I have been using options for the scroll down menu. In place of this, I want to use ng-option such that the values come from javascript file. I even need help with angular js code for this. Here is my HTML code with options values. I need some help.
<div class="form-group">
<label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
<div class="col-lg-8">
<select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_UI.Quality"
tooltip="Quality is required" tooltip-placement="top" required>
<option selected value="Satisfactory">Satisfactory</option>
<option value="NotSatisfactory">Not Satisfactory</option>
</select>
</div>
</div>
<select ng-options="category.value as category.name for category in sourceValues" ng-model="Quality"></select>
1st input category.value will be the value of option and category.name would be the value shown on the drop-down list
In the controller define a array with option and their value that you want to use
$scope.sourceValues = [
{value: 'Satisfactory', name: 'Satisfactory'},
{value: 'NotSatisfactory', name: 'Not satisfactory'}
];
Based on the documentation you could do the following.
<select ng-options="item as item.label for item in qualities track by item.id" ng-model="Quality"></select>
For instance if you have populated your quality options into a scope variable 'qualities':
$scope.qualities = [{id: 1, label: 'Low Quality'}, {id: 2, label: 'Medium Quality'}, {id: 3, label: 'High Quality'}];
You can update your html like:
<div class="form-group">
<label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
<div class="col-lg-8">
<select id="Quality" name="Quality" class="form-control" style="width:170px" ng-options="item as item.label for item in qualities track by item.id" ng-model="vm.EditRef_UI.Quality" tooltip="Quality is required" tooltip-placement="top" required>
</select>
</div>
You would need to use attribute ng-options like this:
ng-options="item as item.label for item in qualities track by item.id"
Your selection will still be updated on scope variable vm.EditRef_UI.Quality.
I have code like this
{"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]}
<div ng-model="item" ng-repeat="product in xyz">
<div>{product.a}</div>
<div>
<select>
<option ng-repeat="value in pqr">{{value}}</option>
</select>
</div>
<div>
<select>
<option ng-repeat="number in abc">{{number}}</option>
</select>
</div>
</div>
I want to update my object on changing the values in dropdowns and update the onject "xyz"!
try like this.
you should define model for select tag.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data =
{
"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="(key,value) in data.xyz">
<div ng-repeat="(k,v) in value">{{v}}</div>
<div>
<select ng-model="model1" ng-options="v1 as v1 for v1 in data.pqr" ng-change="value.b = model1">
</select>
</div>
<div>
<select ng-model="model2" ng-options="number as number for number in data.abc" ng-change="value.c = model2">
</select>
</div>
</div>
</div>
First of all don't use ng-repeat on <option> use ng-options instead. Documentation and examples can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
As for your code, you will need to bind the select to your object:
<select ng-model="product.a" ...> //or which ever property you are trying to update
I am having a dynamic list of data which i am showing by dropdownlist.
But i want one those to be selected when the user enters the page.
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item1 in IdeaMonthList" value="{{item1}}" >{{item1}}</option>
</select>
</div>
</div>
This is how i am making the dropdown list.
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
This is my array of months.By deafult when the user enters this page the current month should be selected in dropdownlist.
Using we can choose the option for static option.
How to do it for Dynamic options
Use ngOptions in angularjs.
The ngOptions attribute can be used to dynamically generate a list of
elements for the element using the array or object
obtained by evaluating the ngOptions comprehension expression.
<select ng-model="item1" ng-options="item for item in IdeaMonthList" style="width:100%;text-align:center;"></select>
Try this:
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item in IdeaMonthList" value="{{item}}" >{{item}}</option>
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
<div class="row">
<div class="col">
<select ng-model="item1" style="width:50%;text-align:center;" ng-options="item for item in IdeaMonthList">
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
Plunker -- http://plnkr.co/edit/8dZXycSTYhQOog12FpEK?p=preview
I think change your ng-model name
<select ng-model="selected" style="width:100%;text-align:center;">
And your JS File:
$scope.selected =$scope.IdeaMonthList[new Date().getMonth()];