assume that this is my controller:
function MainController(BaseInformation, baseInformationConstants) {
var vm = this;
getGenders();
function getGenders() {
vm.genders = BaseInformation.list({headerId: baseInformationConstants.genderId});
}
}
and this select tag, that i want to set default value for it with ng-init, but it didn't worked:
<select ng-init="vm.user.genderId = {id: vm.genders[0].id}"
ng-model="vm.user.genderId"
ng-options="gender.id as gender.topic for gender in vm.genders track by gender.id">
</select>
Related
I have two select boxes. The second select box populates from first select box.
I have applied a filter for the second select box to populate as per the options selected in first select box. The second select box populates from an array var outputformats = [];
This is my code
HTML
<select name="reporttype"id="reporttype"
ng-init="reporttype='1115'"
ng-model="reporttype">
<option value="1115">Previous Day Composite Report</option>
<option value="1114">ACH Receive</option>
</select>
<select name="outputformat" id="outputformat"
ng-model="outputformat"
ng-options="format for format in outputformats | outputformatfilter: reporttype:this">
</select> Value : {{outputformat}}
Filter
angular.module('myApp.outputformatfilter',[])
.filter('outputformatfilter', function () {
return function (input,selectedreport,scope) {
var outputFormatReport = {"1115":"HTML,PDF","1114":"CSV,EXCEL"};
var outputformats = outputFormatReport[selectedreport].split(',');
return outputformats;
};
});
Now what I want is whenever the options in second select box changes, its first option should be selected by default, that is the first option from the array should be selected by default.
UPDATE:
Updated fiddle, added ng-if= reporttype !== '' to second select box
FIDDLE
On your controller, watch the filtered options and act on that:
function myController ($scope) {
// watch the filtered output formats
$scope.$watchCollection("filteredOutputFormats", function(val) {
// select the first one when it changes
$scope.outputformat = val[0];
});
}
Make sure you assign the filtered results to a $scope variable:
<select name="outputformat" id="outputformat"
ng-model="outputformat"
ng-options="format for format in filteredOutputFormats = (outputformats | outputformatfilter: reporttype:this)">
</select>
JSFIDDLE
Try this:-
var myApp = angular.module('myApp',['myApp.outputformatfilter']);
myApp.controller('mainController',function($scope,$filter){
var outputformats = [];
$scope.outputFormatReport = {"1115":"HTML,PDF,CSV,EXCEL","1114":"PHP,HTML,PDF","default":"CSV,HTML"};
$scope.$watch('reporttype', function (newValue, oldValue, scope) {
outputformats = $scope.outputFormatReport[newValue].split(',');
$scope.outputformat=outputformats[0]
});
});
angular.module('myApp.outputformatfilter',[]).filter('outputformatfilter', function () {
return function (input,selectedreport,scope) {
console.log('input is '+input+' \nReport is '+selectedreport);
console.log(scope.outputFormatReport);
if(selectedreport!= undefined){
var outputformats =
console.log( scope.outputFormatReport[selectedreport]);
outputformats = scope.outputFormatReport[selectedreport].split(',');
console.log(outputformats);
}else{
return {};
}
return outputformats;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="mainController">
<select name="reporttype"id="reporttype" ng-init="reporttype='1115'" ng-model="reporttype">
<option value="1115">Previous Day Composite Report</option>
<option value="1114">ACH Receive</option>
</select>
<select name="outputformat" id="outputformat" ng-model="outputformat" ng-options="format for format in outputformats | outputformatfilter: reporttype:this">
</select> Value : {{outputformat}}
</div>
</body>
Seems like a simple problem though but finding it hard to fix.
There is a pagination component, that has a button & a dropdown. User can go to a page by either clicking the button or selecting that page number in dropdown.
The problem is, when I select a value in the dropdown, nothing happens. Because the scope variable doesnt change from the previous one.
aspx:
<div data-ng-app="app" data-ng-controller="ReportsCtrl">
<div id="paging-top">
<div>
<ul>
<li>
<select data-ng-model="SelectedPage" data-ng-change="ShowSelectedPage();"
data-ng-options="num for num in PageNumbers track by num">
</select>
</li>
<li data-ng-click="ShowNextPage();">Next</li>
</ul>
</div>
</div>
app.js
var app = angular.module("app", ["ngRoute"]);
ReportsCtrl.js
app.controller("ReportsCtrl", ["$scope","ReportsFactory",function ($scope,ReportsFactory) {
init();
var init = function () {
$scope.ShowReport(1);
}
$scope.ShowReport = function (pageNumber) {
GetUserResponsesReport(pageNumber);
}
function GetUserResponsesReport(pageNumber) {
$scope.UserResponsesReport = [];
var promise = ReportsFactory.GetReport();
promise.then(function (success) {
if (success.data != null && success.data != '') {
$scope.UserResponsesReport = success.data;
BindPageNumbers(50, pageNumber);
}
});
}
function BindPageNumbers(totalRows, selectedPage) {
$scope.PageNumbers = [];
for (var i = 1; i <= 5 ; i++) {
$scope.PageNumbers.push(i);
}
$scope.SelectedPage = selectedPage;
}
$scope.ShowSelectedPage = function () {
alert($scope.SelectedPage);
$scope.ShowReport($scope.SelectedPage);
}
$scope.ShowNextPage = function () {
$scope.SelectedPage = $scope.SelectedPage + 1;
$scope.ShowReport($scope.SelectedPage);
}
}]);
Say, the selected value in dropdown is 1. When I select 2 in the dropdown, the alert shows1. When Next is clicked, the dropdown selection changes to 2 as expected. Now, when I select 1 in the dropdown, the alert shows 2.
Tried to make a fiddle, but do not know how to do with a promise - http://jsfiddle.net/bpq5wxex/2/
With your OP SelectedPage is just primitive variable.
With every angular directive new scope is get created.
So,SelectedPage is not update outside the ng-repeat scope after drop-down is changed i.e. in parent scope which is your controller.
In order to do this,use Object variable instead of primitive data types as it update the value by reference having same memory location.
Try to define SelectedPage object in controller in this way.
$scope.objSelectedPage = {SelectedPage:''};
in HTML
<select data-ng-model="objSelectedPage.SelectedPage" data-ng-change="ShowSelectedPage();"
In ShowSelectedPage
$scope.ShowSelectedPage = function () {
console.log($scope.objSelectedPage.SelectedPage);
$scope.ShowReport($scope.objSelectedPage.SelectedPage);
}
My angular select isn't binding. I can tell the value is correct, but the select isn't updated. Why is not binding if the value is there?
<div ng-controller="MyController" ng-app>
<select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
<option value="">--Select a Color--</option>
</select>
<input type="button" value="submit" ng-click="Select()"></input>
function MyController($scope) {
$scope.colorList = [{
id: '1',
name: 'red'
}, {
id: '2',
name: 'blue'
}, {
id: '3',
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Here is a fiddle:
http://jsfiddle.net/ky5F4/23/
you need to change the id to a string when doing Select
$scope.Select = function () {
console.log('select fired');
var colorId = 1;
$scope.mySelection.colorId = colorId + "";
}
http://jsfiddle.net/bxkwfo0s/2/
next you should use a property of an object rather than just a scope variable, this will ensure proper model binding
ng-model="mySelection.colorId"
where the object could be something simple
$scope.mySelection = {colorId : colorId };
There are two errors with your code:
You are using colorList as your model in ng-options, but you are calling it datasets in your controller.
You use strings for the id, but set the $scope.colorId to a number.
Here is an updated fiddle changing ids to numbers and changing $scope.datasets to $scope.colorList
function MyController($scope) {
$scope.colorList = [{
id: 1,
name: 'red'
}, {
id: 2,
name: 'blue'
}, {
id: 3,
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Consider making your ng-model be an object, specifically one of the objects that are already in your $scope.colorList. If you do that you should be able to avoid the post-processing you're doing in the click handler.
So your select will look like this:
<select class="form-control" ng-model="selectedColor"
ng-options="color.name for color in colorList"></select>
One gotcha is that if you have an object in your controller that looks JUST LIKE your red object, like$scope.selectedColorObj = { id : '1', name:'red' } and set the select's ng-model to that option, it won't work. Angular will see that you're setting to the ng-model to an object that's not actually in your data source and add an extra option with value="?", so I use $filter in this case to grab the matching member of the array:
$scope.colorId = '3';
$scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];
See http://jsfiddle.net/ky5F4/92/
I have created a select tag with multiple to show it as a listbox and not dropdown.
I have a property which should hold the selected schoolclass which consists of multiple properties like: id, schoolclass , subject, schoolclassIdentifier and color.
When I select now an item in the listbox and press the delete button the $scope.activeStep.selectedSchoolclassCodes array contains one string like "Math10b" actually the selectedSchoolclassCodes array should contain an object created from the above properties.
Why is my selected object wrong?
HTML
<div class="col-md-6">
<select size="10" class="form-control col-md-6" multiple ng-model="activeStep.selectedSchoolclassCodes">
<option class="co-md-6" ng-repeat="item in activeStep.schoolclasses" style="background: rgb({{item.color}})" value="{{item.schoolclassCode}}">{{item.schoolclassCode}}</option>
</select>
</div>
CONTROLLER
'use strict';
angular.module('iplanmylessons').controller('EditSchoolclassCodeWizardStepController', function ($scope, wizardDataFactory, SchoolclassCodeViewModel) {
$scope.activeStep.schoolclassCodeColors = [
'255,165,0',
'255,255,0',
'145,240,140',
'0,128,0',
'170,210,230',
'255,190,200',
'240,130,240',
'100,100,255',
'210,210,210',
'255,0,0'
];
$scope.activeStep.selectedSchoolclassCodes = wizardDataFactory.schoolclassCodesAdded[0];
$scope.activeStep.newSchoolclass = "";
$scope.activeStep.newSubject = "";
$scope.activeStep.newSchoolclassIdentifier = "";
$scope.activeStep.schoolclasses = wizardDataFactory.schoolclassCodesAdded;
$scope.activeStep.schoolclassCodeColorsIsOpen = false;
$scope.activeStep.selectedSchoolclassCodeColor = null;
$scope.activeStep.deleteSchoolclassCode = function () {
for (var i = 0; i < $scope.activeStep.selectedSchoolclassCodes.length; i++) {
var index = Enumerable.from( wizardDataFactory.schoolclassCodesAdded).indexOf(function (s) {
return s.schoolclassCode === $scope.activeStep.selectedSchoolclassCodes[i].schoolclassCode;
});
wizardDataFactory.schoolclassCodesAdded.splice(index, 1);
}
$scope.activeStep.selectedSchoolclassCodes = null;
};
$scope.activeStep.schoolclassCode = function () {
return $scope.activeStep.newSubject + $scope.activeStep.newSchoolclass + $scope.activeStep.newSchoolclassIdentifier;
};
$scope.activeStep.setSchoolclassCodeColor = function (item) {
$scope.activeStep.selectedSchoolclassCodeColor = item;
$scope.activeStep.schoolclassCodeColorsIsOpen = false;
};
});
Have you try ng-options? This post has a good explanation of select/ ng-options with array of objects.
Hope it can help.
I try to set the value of my select dynamically in the controller the following way:
angular.module('vocabApp.controllers', []).
controller('indexController', function ($scope, dictionaryHandler) {
$scope.expressions = [
{ expression: "", meanings: ["first", "second"], selected: "" }];
$scope.counter = 0;
$scope.add = function (expressionString, expressionObject) {
if (expressionString.length == 1) {
$scope.expressions.push({ expression: "", meanings: [""] });
}
dictionaryHandler.sendJsonpRequestToGetMeanings(expressionString, function (meaningsWeAcquired) {
alert("callback called!");
expressionObject.meanings = meaningsWeAcquired;
expressionObject.selected = expressionObject.meanings[0];
});
};
});
The odd thing is that the content of "meaningsWeAcquired" shows up in the select list, but there is no default selected value. Here's the html:
<select ng-init="option.selected = item.meanings[0]" ng-model="option.selected" ng-options="option as option for option in item.meanings"></select>
On page load the default value is "first", so I don't get why the same thing doesn't work when I set the object's "selected" field from the callback method.
I can see that you are setting expressionObject.selected in the sendJsonpRequestToGetMeanings callback, but in the HTML the select ng-model attribute is set to "option.selected", which does not point to the value you set before. I guess that the select element is wrapped by the ng-repeat directive and "item" references current expresssionObject.
So you should try changing:
ng-model="option.selected"
to
ng-model="item.selected"