I'm using select2 tool in my project using angularjs.
While assigning value to this select2 in a grid using angularjs in first row,
it is not assigning, but if I'm trying to assign in next to first row that is from 2nd row to next, it is working fine.
Why it is happening.?
Any suggestions regarding this is welcome.
Thanks in advance.
<td ng-if="configRow.validation.valueType == 'Single Choice'" style="width:26%">
<!-- <input style="width:100%" type="text" ng-model="configRow.Value" ui-select2="selectChoices" ng-blur="addToConfig()"> -->
<div class="print-blank" >
<select ui-select2 ng-model="configRow.Value" data-placeholder="Select One" ng-change="updatedDate($index)">
<option value=""></option>
<option ng-repeat="element in configRow.validation.list track by $index" value="{{element}}" >{{element}}</option>
</select>
</div>
</td>
Related
I encountered a problem with this code, so there's a multiple selection field(generated using ng-repeat). My question is, is there a way where I can make the first selection (from the multiple selections) required without affecting the remaining 3 selections?
<div class="col-sm-3">
<select chosen="template.accOptions.laccOptions"
name="{{ 'AccountId' + $index }}"
ng-model="Map.AccountId"
ng-options="Account.id as (Account.name +'('+ glAccount.glCode +')')
for Account in template.accOptions.laccOptions"
class="form-control">
<option value="" ng-disabled="Map.required">
{{'label.menu.selectone' | translate}}
</option>
</select>
</div>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
I have a few Select lists on my page one of them works fine the rest of them have a blank item at the top of the options list.
This works
<td>
<select data-ng-model="c.ResultOptionId" ng-change="checkResult(c)">
<option value="" selected>--Select Option--</option>
<option data-ng-repeat="opt in c.ResultOptions" value="{{opt.Value}}">{{opt.Text}}</option>
</select>
</td>
This has a extra blank item
<td>
<select data-ng-model="c.EquipmentId">
<option value="" selected>--Select Equipment--</option>
<option data-ng-repeat="eq in c.Equipment" value="{{eq.Value}}">{{eq.Text}}</option>
</select>
</td>
The HTML generated for the select list item is
<td>
<select data-ng-model="c.EquipmentId" class="ng-pristine ng-valid ng-not-empty ng-touched">
<option value="? number:0 ?"></option>
<option value="" selected="">--Select Equipment--</option>
<!-- ngRepeat: eq in c.Equipment -->
<option data-ng-repeat="eq in c.Equipment" value="2" class="ng-binding ng-scope">EQ-001</option>
<!-- end ngRepeat: eq in c.Equipment -->
</select>
</td>
I'm new to AngularJs but from what I've read this should work. I have checked the data returned from my API call and that is correct there are no unexpected items.
Thanks for any help
If you use ng-repeat to generate the options, as the documentation indicates, the bound value is, always, a string.
But the value stored in the ngModel (c.EquipmentId) is a number. So you're telling Angular: here's a list of options with their values, which are strings, and please select, among the string values, the one equal to this number. Since a string is never equal to a number, angular generates an additional option.
So, as usual, use ng-options to generate your options:
<select data-ng-model="c.EquipmentId"
ng-options="eq.Value as eq.Text for eq in c.Equipment">
<option value="">--Select Equipment--</option>
</select>
And make sure that c.EquipmentId contains one of the proposed equipment values, or is null or undefined.
Here's a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function ($scope) {
$scope.equipments = [];
for (var i = 0; i < 5; i++) {
$scope.equipments.push(i);
}
// If you don't want any blank option => $scope.equip = $scope.equipments[0];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<table>
<thead>
<tr>
<td>Equipment</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select data-ng-options="equip as equip for equip in equipments" data-ng-model="equip">
<!-- you can coment this line below, if you don't want blank option -->
<option value="">-- Select equipment--</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Generally, speaking: (1) you should use ng-options for options in a select and (2) a blank or new option means that the current model value for the select does not appear in the list of options.
<td>
<select data-ng-model="c.EquipmentId" data-ng-options="eq.Value as eq.Text for eq in c.Equipment">
<option value="">--Select Equipment--</option>
</select>
</td>
In the javascript, make sure to initialize c.EquipmentId in your controller.
c.EquipmentId = ""; // this will initialize the option to start at the `--Select Equipment--` option.
c.EquipmentId = c.Equipment[0].Value; // this will initialize the option at the first Equipment value.
// for the issue that you stated, it looks like c.EquipmentId is either null or 0, so instead you can do something like this:
if (!c.EquipmentId) c.EquipmentId = "";
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.
I'm trying to do something like this
but instead of having alert boxes just having comma separated values in the input feild.
Ok I'm trying ui-select2 but I'm not very clear about how to use it. I will provide samples of what I have as a working typeahead and what I have done to try to get the select2 to work.
ui-bootstrap typeahead:
<input type="text" ng-model="selectedItem.value" typeahead="item.value for item in items |filter:$viewValue| limitTo:8" typeahead-on-select="updateItem()" placeholder="select Item"/>
ui-select2 (can't load data.)
<select ui-select2 ng-model="selectedItem.value" data-placeholder="Select Item">
<option value=""></option>
<option ng-repeat="item.value for item in items" value:"{{item.value}}>{{item.label}}</option>
</select>