I have one query regarding dropdown selected value.
Project dropdown
$rootScope.projects = response;
First I am getting project list by using angularjs.
This is my Project dropdown.
Whenever doing edit how can I set proper value to project dropdown.
<div class="form-group width50">
<label class="width30 marginTop fl">Project Name</label>
<div id="selectProject_dd" class="selectbox travel_drop-downs width50 push-right-10 push-top-15">
<div class="select">
<span class="tr_txt">Please Select Project</span>
</div>
<span class="admin-sprite f_dropdown_icon"></span>
<select id='project-dropdown' ng-model="projectDropDown"
ng-selected="projectDropDown"
ng-options="project as project.projectName for project in projects"
ng-change="onchangeProject(projectDropDown)">
</select>
</div>
</div>
You can use the following code:
<select ng-init="projectDropDown = projects[0]" id='project-dropdown' ng-model="projectDropDown" ng-options="project as project.projectName for project in projects"
ng-change="onchangeProject(projectDropDown)"></select>
By using ng-init directive, and this question make ng-init more clear for you.
Related
I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
In my angular app I'm using ng-repeat to generate several radio buttons, the ultimate goal is to add a choiceSelected class (ngClass colour styling) to the label of the clicked radio input. I can add the style to the clicked button, BUT that style is added to every other clicked radio button and I end up with 5 coloured labels. Can't understand why.
Here is the HTML code:
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio" name="optradio" ng-model="isChecked" ng-value="$index" ng-click="selectAnswer($index,questionObject)">{{obj.body}}</label>
</div>
</div>
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
/*********************************************/
ng-model="isChecked"
ng-value="$index"
/*********************************************/
ng-click="selectAnswer($index,questionObject)">{{obj.body}}
</label>
</div>
</div>
Look at the lines inside the comments, clearly tells that your value of the checkbox($index) is binding to the isChecked variable.
By your, condition in ng-class isChecked==$index it is same for all the elements and so the class is applied for all radio buttons.
if you can update the Json of questionObject , can give you alternative option.
Assuming that questionObject contains the following json
[{
"body": "abc"
}, {
"body": "def"
}, {
"body": "aghi"
} ]
You can use the below code to make your result achieve
<div class="row" ng-repeat="obj in questionObject track by $index" >
<div class="radio" >
<label class="choice"
ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
ng-value="obj.body"
ng-click="selectAnswer($index,obj)">
{{obj.body}}
</label>
</div>
The method selectAnswer should make your work simple. Use this
$scope.selectAnswer=function(number,obj)
{
$scope.isChecked=number;
}
LIVE DEMO
NOTE: In your code the selectAnswer method call in HTML passes the
questionObject fully
Update 1
Reason for manually defining isChecked
Angular looks for the the value of isChecked in the scope because you have used ng-class in the
I have an array of objects that I bind to the scope. My view then accesses the objects via ng-options like this:
<div class="tile block box-shadow">
<form role="form">
<div class="form-group">
<label>Reason for change</label>
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" />
</div>
</form>
</div>
but the dropdown has nothing when you select it.
I have logged the priceChangeReasons and can see that the array is working and returning values.
I have made a codepen to show the issue:
http://codepen.io/r3plica/pen/XbQzMa?editors=101
I realise this is probably a syntax error on my part, but I can't see it.
Can someone help?
ngOptions directive requires ngModel, just add:
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" ng-model="controller.reason" />
and all should work
I have two dropdowns with ng-options. One for displaying primary brokers and other for secondary brokers.
The Mark-up is as follows:-
<div class="col-md-4">
<div class="form-group">
<label>Primary Broker: </label>
<button type="button" class="btn-help" tabindex="-1" data-popover="" data-content="Lead JLL broker for the opportunity">
<span class="circle-help">?</span>
</button>
<select class="form-control"
ng-options="jllContact.JllUserId as jllContact.Name for jllContact in controller.primaryJllBrokers"
ng-model="controller.primaryJllContactId"
id="primaryJllContact" data-field='{"name": "Primary Broker", "attribute": "PrimaryJllContact"}'
ng-change="controller.setPrimaryJllContact()"
ng-class="{'req': controller.data.isFieldRequired('PrimaryJllContact'), 'has-error': controller.data.isFieldValid('PrimaryJllContact') == false}"
ng-disabled="!controller.isEnabled('JllContacts')||!controller.canEditBrokerAllocation()">
<option value="">Select Primary Broker</option>
</select>
</div>
</div>
#* Secondary Broker*#
<div class="col-md-4">
<div class="form-group">
<label>Secondary Broker: </label>
<button type="button" class="btn-help" tabindex="-1" data-popover="" data-content="Secondary JLL broker for the opportunity">
<span class="circle-help">?</span>
</button>
<select class="form-control"
ng-options="jllContact.JllUserId as jllContact.Name for jllContact in controller.secondaryJllBrokers"
ng-model="controller.data.SecondaryJllContactId"
id="secondaryJllContact" data-field='{"name": "Secondary Broker", "attribute": "SecondaryJllContact"}'
ng-change="controller.handleSecondaryJllContactChange()"
ng-class="{'req': controller.data.isFieldRequired('SecondaryJllContact'), 'has-error': controller.data.isFieldValid('SecondaryJllContact') == false}"
ng-disabled="!controller.isEnabled('JllContacts')||!controller.canEditBrokerAllocation()">
<option value="">Select Secondary Broker</option>
</select>
</div>
When I change the secondary broker, as seen in the markup I call a method called
handleSecondaryJllContactChange. The method is as follows.
handleSecondaryJllContactChange:()=>
primaryJllContactId = this.primaryJllContactId
this.refreshPrimaryBrokers((primaryBrokers)=> this.primaryJllContactId = primaryJllContactId)
refreshPrimaryBrokers:(callback)->
this.primaryJllBrokers = _.where(this.data.JllContacts, (jllc)=> jllc.Role.ID == 21 && jllc.JllUserId != this.data.SecondaryJllContactId)
if callback? && callback!= undefined && this.primaryJllBrokers!=null && this.primaryJllBrokers != undefined
callback(this.primaryJllBrokers)
As seen from the code, we are setting the ng-model "controller.primaryJllContactId" for the first drop down after the collection controller.primaryJllBrokers has been refreshed.
However, the drop down still shows instead of the correct option in IE 11.
NOTE:
On examining the console, we did notice that ng-model for the first
dropdown controller.primaryJllContactId has the right value. It just
doesn't display correctly in the drop down.
This is happenning only in IE 11. It works perfectly in chrome.
Couple of things we have tried:-
Instead of ng-change="controller.handleSecondaryJllContactChange()" in the second dropdown we tried to have a watch on controller.secondaryJllBrokers
and call the method controller.handleSecondaryJllContactChange().
The second route which we took was based on the assumption that we are setting the ng-model before options are rendered. Hence we took the $timeout
approach. In the handleSecondaryJllContactChange() method shown above we did this in the second line:-
this.refreshPrimaryBrokers((primaryBrokers)=> this.$timeout(=> this.primaryJllContactId = primaryJllContactId))
None of these two approaches worked. Any ideas why this is happening and what is the way to know when options have finished rendering.
Thanks in Advance !!!!
Hi I am trying to display certain values based on option selected in a drop down.
My code is
data is
[{"city":"New York","location":"123"},
{"city":"Chicago","location":"953"}
{"city":"New York","location":"788"}
{"city":"Chicago","location":"853"}]
Code is
<form name="test" class="form-horizontal">
<div class="from-group container">
<label for="abc" class="col-sm-2">City</label>
<div class="col-sm-10">
<select class="form-control" ng-model="cc">
<option ng-repeat="city in cities" value="city.value">{{city.name}}</option>
</select>
</div>
<ul>
<li ng-repeat="att in cities">{{att.locations | filter:cc}} ></li>
</ul>
</div>
</form>
With above code I have two problems.
1. As I select different options in the drop down it wont filter for that city name.
2. When the file is first loaded it will display all the locations
Please let me know how to fix this code so when I select an option it lists all the locations filtering based on the city name.
Thanks
angular has a really cool feature where you can filter directly in your ng-repeat.
I've set up a fiddle where you can see this in action. Basically you set an object (cc) based on the select and then use:
<div ng-repeat="city in data | filter:cc">
Hope this helped.