i am very new to ionic and angularjs. i am using ionic 1 and i want to get a value after make a selection from dropdown..after i select and click next button, the other page will show the name of item that i select.this is on first page. on the second page i want it display communication if i select it on 1st page. i know this is the wrong way..can help me?
<label class="item item-input item-select">
<div class="input-label">
Initiative A
</div>
<select>
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Save the value in $rootScope
.controller('Ctrl_1',function($rootScope){
$rootScope.myValue= "communication(i.e, use ng-modal)"
})
and access it like this
.controller('Ctrl_2',function($rootScope){
alert("what is my value? " + $rootScope.myValue);
})
You can get the selected option using ng-modal.
<select ng-modal="selectedValue">
<option>Communication</option>
<option>Customer</option>
<option selected></option>
</select>
Now you will get the selected option on controller by $scope.selectedValue.
You can pass this value to next page using $rootScope or as stateParam.
In first controller,
.controller('myCtrl1',function($scope, $rootScope){
$rootScope.myValue = $scope.selectedValue;
})
In second controller,
.controller('myCtrl2',function($scope, $rootScope){
$scope.selectedValue = $rootScope.myValue;
})
You can display this value in second page HTML like {{selectedValue}}
Related
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
I have a problem when ng-selected with the following code:
HTML
<select class="form-control" ng-model="producto.proveedor">
<option ng-selected="data.id_proveedor == proveedor.id" ng-repeat="proveedor in proveedores" value="{{proveedor}}">{{proveedor.nombre_empresa}}</option>
</select>
Controller
app.controller("EditarProductoController", function editController($scope,$routeParams,$filter,$location){
$scope.textButton = "Editar producto";
$scope.producto = $filter('filter')($scope.productos, {id:$routeParams.id})[0];
$scope.editarUsuario = function(){
alert($scope.producto["proveedor"]);
$location.url("/");
}
})
If I remove "ng-selected" from the code, it works fine
The code works perfect, the problem is that when I load the form return in the value combobox "undefined", it is rare because the visual part works well, then I can solve the problem if I select a different item of the combobox and re-select the original, it is Very annoying to the client, does anyone know how to fix this bug?
While your post doesn't show it, I think the UI is being rendered before "productos" gets populated with data from the database, you could wait for the promise to end with ng-if
<div ng-if="productos">
<select class="form-control" ng-model="producto.proveedor">
<option ng-selected="data.id_proveedor == proveedor.id" ng-repeat="proveedor in proveedores" value="{{proveedor}}">{{proveedor.nombre_empresa}}
</option>
</select>
</div>
I am new to ionic + angularJS... I have created a select item drop down like this
<div class="list">
<div class="item item-input item-select">
<div class="input-label" >
Unit
</div>
<select id="unit">
<option selected>Kilometer</option>
<option>Mile</option>
</select>
</div>
</div>
I am wanting to get the value with angularJS... I have tried this..
The scope.convert is coming when I click a button.
$scope.convert = function() {
alert($scope.unit);
};
It outputs "undefined".. Why is this?
$scope.unit is actually not defined in the scope, hence you get undefined. You have to define unit on the scope. Since this is an angular application, you can do it the angular way.
In your controller, you want to define a model to hold the value selected. Lets call this model unit like you are actually trying to do. Hence you can initialize this model to Kilometer in your controller.
$scope.unit = 'Kilometer'
Now you need an array of options. This can be set up in your controller as well.
$scope.unitOptions = ['Kilometer', 'Mile']
We use scope to expose our models to the view, hence in your view, you can access this models as follow:
<select id='unit' ng-options="unit for unit in unitOptions">
You will get a dropdown with 'Kilometer' and 'Mile'. You can select any one of them and your model unit will be updated.
//This should now work
$scope.convert = function() {
alert($scope.unit);
};
Note: I left the id attribute on the select element to show it has nothing to do with the model in your controller.
I'm pretty new to Angular, so I may be going about this all wrong...
I have a <select> similar to the following:
<select ng-model="mySelectedValue">
<option value="">--</option>
<option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>
This mostly works... The dropdown initially renders with the correct option selected, and if I change the selected option, then mySelectedValue will get the new selection. However, mySelectedValue does NOT get the initially-selected option. mySelectedValue is blank until I change the value in the dropdown.
I looked at ng-init, but that seems to get evaluated before someDynamicArrayOfValues is set...
Is there a way I can get mySelectedValue to receive the value in the initially-selected <option>?
UPDATE:
I forgot to mention that I had also tried using ng-options, but haven't had any luck getting that to work in conjunction with determining which option was selected.
I've tried this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
<option value="">--</option>
</select>
</div>
and this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
<option value="">--</option>
</select>
</div>
but neither of those work because the select is built (and ng-init and ng-selected both get evaluated) before someDynamicArrayOfValues has been set and, therefore, before the <select> is even visible. When using <option ng-repeat="...">, the <select> doesn't get built/initialized until after someDynamicArrayOfValues is set, which is why I had been going that direction.
Is there a way to get the ng-options technique to work while, at the same time, having the select dependent on someDynamicArrayOfValues (if ng-options is the better way to go)?
UPDATE 2:
Here's a Plunker (modified from ababashka's answer) that is a little closer to what I'm ultimately trying to achieve: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview. It's not quite there yet... I'd like it to have each of the 3 dropdowns set with the closest-matching dynamic value once someDynamicArrayOfValues is set.
I think that it will be good it you will use ng-options attribute of select tag. It's an angular directive which creates options according to Array of options. You can take a look at select documentation
If you use your code - your function myFunctionForDeterminingWhetherValueIsSelected works twice for every option at initialization and once for every option item when you select some another option.
Demo with your code: http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
Demo for select you could see at description of select directive.
Update
At first, to see when value is changed - you need to use ng-change attribute of select tag, like this:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()">
<option value="">--</option>
</select>
Then, i don't know how does myFunctionForSettingSelectedValue look like, but there are 2 variants:
This function returns some value - then you need to use ng-init next way.
Controller:
$scope.someInitFunc = function () {
return 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="mySelectedValue = someInitFunc()">
<option value="">--</option>
</select>
You set value of mySelectedValue in this function - then you do this.
Controller:
$scope.someInitFunc = function () {
$scope.mySelectedValue = 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="someInitFunc()">
<option value="">--</option>
</select>
I have created an example which implements the first version of using ng-init. When new value is selected - it's printed to console.
Also, i moved options to the options.json file. So options are initialized just after ajax request was finished. Everything works great.
Demo: http://plnkr.co/edit/pzjxxTnboKJXJYBGcgNb?p=preview
Update 2
Hello again. I think you don't need to have any ng-init according to your requirements. You can just initiate values of your model when http request is finished. Also i don't understand why do you need ng-change function in this case.
Here is modified code you need from your plunk where values of ng-models are initiated after options are loaded.
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.someStaticArrayOfValues = ['One', 'Two', 'Three'];
$scope.mySelectedValues = {};
$http.get('options.json').then(
function (response) {
$scope.someDynamicArrayOfValues = response.data;
for (var i = 0; i < $scope.someStaticArrayOfValues.length; ++i) {
$scope.someDynamicArrayOfValues.some(function (value) {
if (value.substring(0, $scope.someStaticArrayOfValues[i].length) === $scope.someStaticArrayOfValues[i]) {
$scope.mySelectedValues[$scope.someStaticArrayOfValues[i]] = value;
return true;
}
});
}
},
function (response) {
console.log('ERROR!');
}
);
});
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-show="someDynamicArrayOfValues">
<ul>
<li ng-repeat="staticValue in someStaticArrayOfValues">
{{staticValue}} -
<select ng-model="mySelectedValues[staticValue]"
ng-options="myValue for myValue in someDynamicArrayOfValues">
<option value="">--</option>
</select>
<h2>{{mySelectedValues[staticValue]}}</h2>
</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview
Here is a modified plunker that works as intended: http://plnkr.co/edit/Y8OSvmrG3u0XjnCU3ah5?p=preview.
The main change was using ng-if in place of ng-show. This forces angular to recompile/link the html whenever it is rendered:
<div ng-if="someDynamicArrayOfValues">
...
</div>
Also ng-change, from the original plunker, shouldn't be necessary, and there were a couple of typos fixed.
It works a whole lot better when you use ng-options on your select element instead of nesting option with ng-repeat.
https://docs.angularjs.org/api/ng/directive/select
Then you are capable of setting the ng-model with ng-init.
You can try to set the initial value of mySelectedValue in your Controller like so:
$scope.mySelectedValue = '';
I have created example for your problem in plnkr.
Visit: plnkr.co/edit/rKyjijGWSL1IKy51b8Tv?p=preview
You are going about it the reverse way. ng-model reflects the state of the <select> and is two-way bound.
You just need to set your mySelectedValue to what you want <select> to select first, and no other tricks are required.
So, in the controller, do something like the following:
$scope.mySelectedValue = someDynamicArrayOfValues[0];
And remove the ng-selected and the <option ng-repeat...> from <select>:
<select ng-model="mySelectedValue"
ng-options="value for value in someDynamicArrayOfValues">
<option value="">--</option>
</select>
I was just thrown for a loop by scope creep/change on this project.
Initially there were 6 buttons on a page (with other stuff) triggering routes to 6 different Add New ... Forms. I had all the buttons wired to the routes and working.
On Friday, the UIX leader decided that the landing page was too complex and convinced the stakeholders that a single "ADD NEW REQUEST" button was needed leading to a drop down wherein the user could choose the correct form.
So my template looks like this:
<form>
<div class="row">
<div class="form-group col-lg-12">
<label for="requestType">What type of request would you like to create?
<span class="required">*</span>
</label>
<select class="form-control" name="requestType" ng-model="requestType" ng-change="new_form_select()">
<option value="0">Please Select ...</option>
<option value="1">IT Web Task</option>
<option value="2">SAP Task</option>
<option value="3">Email Campaign</option>
<option value="4">Third Party Suppression</option>
<option value="5">Report Request</option>
<option value="6">Other / I'm Not Sure</option>
</select>
</div>
</div>
</form>
I have templates of webtask.html, saptask.html, campaign.html, suppression.html, report.html, generalrequest.html.
I realized when I got this far that I don't have a clue what to do next. Should I put all of those forms on the same page hidden and show them based on the selection (can I even do that?) or should I make the select sort of a page jump menu and load the applicable form when selected (do I do that in the controller?)
OMG, I am lost!
Needless to say, this is my first Angular Project ... I used to use pure jQuery and am learning AngularJS.
Any guidance is GREATLY appreciated!!!
I can't solve this problem for you but I can guide you through the main steps of a simple solution:
Take a look at angular-ui-router
The method called on your select ng-change would redirect to the state for the selected form:
<select class="form-control"
name="requestType"
ng-model="requestType"
ng-change="new_form_select()">
<option value="0">Please Select ...</option>
<option value="webtask">IT Web Task</option>
<option value="saptask">SAP Task</option>
....
</select>
$scope.new_form_select = function() {
if(requestType) {
location.href = '#/' + requestType;
}
}
You now need to define the states and link the templates. Angular-UI-Router has a few examples in it's documentation but it would be something like:
.state('webtask', {
url: "/webtask",
templateUrl: "templates/webtask.html",
controller: function() {
}
})
.state('saptask', {
url: "/saptask",
templateUrl: "templates/saptask.html",
controller: function() {
}
})
// you get the idea..
Now you need to add the markup where these templates will be placed in your page. Again Angular-UI-Router has a few examples on how this can be done:
<body>
<!-- Your select could be here -->
<!-- The selected template would appear here -->
<div ui-view></div>
</body>
Of course you need to add the $stateProvider, $urlRouterProvider in the config for your main controller but all this is explained in the Angular-UI-Router page.