i used ng-option or ng-repeat and change value of array but not bind new values
<select multiple="true" ng-model="staticField.text">
<option ng-repeat="t in Activitydata track by $index ">{{t}}</option>
</select>
and i change it to ng-option and does work
that's angular js code
$scope.Activitydata = [];
$scope.ActivityFound = function (from) {
for (var h = 0; h < allRequestDetails.procurationCustomers.length; h++) {
activitynote = allRequestDetails.procurationCustomers[h].notes;
actList = activitynote.split('|');
for (i = 0; i < actList.length; i++) {
//alert(1);
console.log('element : ' + actList[i]);
$scope.Activitydata.push(actList[i]);
}
$scope.Activitydata.removeDuplicates();
$scope.Activitydata.unique();
$scope.Activitydata.remove("");
};
....
....
If you are using ng-repeat the you should provide what value to bind as..
<select multiple="true" ng-model="staticField.text">
<option ng-repeat="t in Activitydata track by $index" value={{t}}>{{t}}</option>
So in this case the value of t gets bind to the ng-model..If you are using ng-options then you should use as..
<select multiple="true" ng-model="staticField.text" ng-options="t.code as t.name for t in Activitydata track by $index ">
<option value="">Select</option>
I am assuming here that ActivityData contains name and code as property....
Related
I have 2 different array set as :
var oldarr = ['one','two','three'];
var newarr = ['four','five','six'];
var condi = 1 / 0;
I am using array value as ng-model as options value for select dropdown. However I want to use different array on basis of value of cond variable, that means : if condi is 1, I will use ng-model = oldarr and vif confi is 2 , I will use ng-model = newarr.
My drop down is as below. can someone pls suggest me how can I do this ?
<select ng-model="oldarr " ng-selected="{{defaultvalue == selectedslastatus}}">
<option ng-repeat="vals in oldarr ">{{vals }}</option>
</select>
I think the best approach is to use a middle array.
(Actually this can be done by ng-show or ng-if or ng-switch but if you want a clean HTML Template (View) and your arrays' structures are the same you may want to migrate the logic to Controller)
like:
<select ng-model="modelArr" ng-selected="{{defaultvalue == selectedslastatus}}">
<option ng-repeat="vals in modelArr ">{{vals }}</option>
</select>
and do the logic of using which array in your controller.
This is how your controller may look like:
//
$scope.$watch('condi', function (){
if (condi === true)
$scope.modelArr = newArr;
else
$scope.modelArr = oldArr;
})
I would simply swap the views with ng-show or something similar. Assuming that condi is not always a boolean (1 or 0), I suggest ng-switch. Here is an example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.condi = 1;
$scope.oldarr = ['one', 'two', 'three'];
$scope.newarr = ['four', 'five', 'six'];
$scope.changeCondi = function() {
$scope.condi = ($scope.condi == 1) ? 0 : 1;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="changeCondi()">Change condi</button> : {{condi}}
<div ng-switch="condi">
<div ng-switch-when="1">
<select ng-model="oldar">
<option ng-repeat="vals in oldarr">{{vals}}</option>
</select>
Selected: {{oldar}}
</div>
<div ng-switch-when="0">
<select ng-model="newar">
<option ng-repeat="vals in newarr">{{vals}}</option>
</select>
Selected: {{newar}}
</div>
</div>
</div>
The select element is not bound as expected.
html:
<select ng-model="SelectedPage"
ng-change="ShowPageResult();" ng-options="o for o in PageNumbers">
</select>
ctrl.js:
function BindPageNumbers() {
$scope.PageNumbers = [];
for (var i = 1; i <= 2) ; i++) {
$scope.PageNumbers.push(i);
}
}
output:
<option value="0"label="1">1</option>
<option value="1" label="2">2</option>
if i put $scope.PageNumbers.push(i.toString());, then the output is
<option value="?"label=""></option>
<option value="0" label="1">1</option>
<option value="1" label="2">2</option>
expected:
<option value="1">1</option>
<option value="2">2</option>
what should be done to get the desired o/p : http://jsfiddle.net/s222904f/
In your controller:
$scope.PageNumbers = [];
for (var i = 1; i <= 2 ; i++) {
$scope.PageNumbers.push({ id: i, value: i });
}
In your view:
<select ng-model="SelectedPage"
ng-options="o.id for o in PageNumbers track by o.value"></select>
Check it: http://jsfiddle.net/khwuv4Lj/
Per the answer here, the empty option exists because the
ng-model="SelectedPage"
line binds it to an empty string. You can avoid this by setting the default value if the select in the scope.
Edit: Plnkr was updated to fix the OP's comment.
I'm trying to use ng-repeat and ng-model in order to populate an array. The number of required elements in the array comes from a select element`.
The relevant part of my controller:
app.controller('AddMsgCtrl', function($scope){
$scope.range = function(n){
var array = [];
for(var i = 0 ; i < n ; i++)
array.push(i);
return array;
};
$scope.images = ['1.gif', '2.gif', '3.gif', '4.gif', 'any.gif'];
$scope.msg = { 'images': [] }
And the relevant part of my html:
Number of images:
<select class="browser-default" ng-model="numOfImages" ng-init="numOfImages=0">
<option ng-repeat="number in range(6)" value="{{number}}">{{number}}</option>
</select>
<div>
<div ng-repeat="n in range(numOfImages) track by $index">
<select class="browser-default" ng-model= ???>
<option ng-repeat="image in images" value="{{image}}">{{image}}</option>
</select>
</div>
</div>
Right now the user can select the number of images they wish to input and the same amount of select elements shows up. I'm just not sure how to use ng-model to add the chosen elements to the $scope.msgs.images array.
EDIT: I was closer than I thought. This seems to work correctly:
<select class="browser-default" ng-model="msg.images[$index]">
<option ng-repeat="image in images" value="{{image}}">{{image}}</option>
</select>
use msg.images[$index]
Plnkr Demo
HTML
Number of images:
<select class="browser-default" ng-model="numOfImages" ng-init="numOfImages=0" ng-options="number for number in range(6)" ng-change="updateImages()">
</select>
<div>
<div ng-repeat="n in range(numOfImages) track by $index">
<select class="browser-default" ng-model="msg.images[$index]" ng-options="image for image in images">
</select>
</div>
</div>
Msg : {{msg}}
Controller
$scope.range = function(n){
var array = [];
for(var i = 0 ; i < n ; i++)
array.push(i);
return array;
};
$scope.images = ['1.gif', '2.gif', '3.gif', '4.gif', 'any.gif'];
$scope.msg = { 'images': [] };
$scope.updateImages = function() {
// alert($scope.numOfImages);
$scope.msg.images.splice($scope.numOfImages, $scope.msg.images.length);
}
Extra function is added which will execute on selecting the number of images. Once you select a number and if you want to reduce the number, the array size also should be decreased if you want. For that I added.
I have this drop-down list in my angular code:
<div class="btn-group" dropdown>
<select class="selected_location" ng-options="perlocation.id as perlocation.name for perlocation in locations" ng-model="cleaningServiceLocation">
<option value="">Please Select Location</option>
</select>
<div>
Now in my controller I can easily call the selected value as:
$scope.cleaningServiceLocation
How can I get the text, or in my case, the name of the selected location?
You can make model (perlocation) as object instead of (perlocation.id)-
<select class="selected_location" ng-options="perlocation as perlocation.name for perlocation in locations" ng-model="cleaningServiceLocation">
And access it as -
$scope.cleaningServiceLocation.name
The easy way would be to loop through the locations array every time the value changes and grab the name property from the location whose id matches $scope.cleaningServiceLocation:
$scope.getName = function(id) {
for (var i = 0; i < $scope.locations.length; i++) {
if ($scope.locations[i].id == id) {
return $scope.locations[i].name;
}
}
return "";
}
Try it in a Plunker.
I have a multi select dropdown that functions as appropriate when setting values, but once set, I need to display what has been selected in an update form. My values are stored in a DB (SharePoint) accessible over REST. Here is an example REST output with multiple IDs of my array:
"CatId": [
18,
80,
84
],
Here is my select function, including retrieving the variable from REST:
var currentCatValue = results.CatId;
$scope.categoryValues = [];
appCatList.query(function (categorydata) {
var categoryValues = categorydata.value; // Data is within an object of "value", so this pushes the server side array into the $scope array
// Foreach type, push values into types array
angular.forEach(categoryValues, function (categoryvalue, categorykey) {
$scope.categoryValues.push({
label: categoryvalue.Title,
value: categoryvalue.ID,
});
})
var currentDetailIndex = $scope.categoryValues.map(function (e) { return e.value; }).indexOf(currentCatValue);
$scope.vm.selectedCategory = $scope.categoryValues[currentDetailIndex];
});
Here is my HTML:
<select class="form-control" id="Event_Cat" data-ng-model="vm.selectedCategory"
data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
EDIT: Using id (inspired by yvesmancera) in ng-model would greatly reduce the complexity - You don't need to pre-process your options and input array anymore, just plug it in and done!
<select multiple ng-model="currentCatValue" ng-options="opt.ID as opt.Title for opt in categoryValues">
$scope.currentCatValue = currentCatValue;
$scope.categoryValues = categoryValues;
Note: normally we would pre-populate ng-options into an array to preserve the order of the options, if the original data is an object. But since you use orderBy, you can use the object directly as ng-options.
fiddle
Outdated:
You need to point to the same object in ng-options for them to get selected on load.
$scope.categoryValues = [];
$scope.vm.selectedCategory = [];
angular.forEach(categoryValues, function (categoryvalue, categorykey) {
var category = {
label: categoryvalue.Title,
value: categoryvalue.ID,
}
$scope.categoryValues.push(category);
if (currentCatValue.indexOf(parseInt(category.value)) != -1) {
$scope.vm.selectedCategory.push(category);
}
});
Try changing your ng-options to something like:
<select class="form-control" id="Event_Cat" data-ng-model="vm.selectedCategory" data-ng-options="opt.id as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
And make this line change in your controller:
$scope.vm.selectedCategory = $scope.categoryValues[currentDetailIndex].id;
Edit for multiple selection:
<select class="form-control" id="Event_Cat" data-ng-model="selectedCategoriesIds" data-ng-options="opt.id as opt.label for opt in categoryValues | orderBy:'label'" required multiple>
<option style="display:none" value="">Select a Category</option>
</select>
In your controller, add the items you want selected to $scope.selectedCategoriesIds e.g.:
$scope.selectedCategoriesIds = [];
$scope.selectedCategoriesIds.push('18');
$scope.selectedCategoriesIds.push('80');