I have a select that is generated dynamically and I want one of the values to be selected by default. The value that is going to be selected depends on what record the user is editing.
I have the following code that isn't currently working:
<select ng-model="record.chain" name="chain" class="form-control" ng-change="updateBrands(record.chain)">
<option ng-selected="{{ x.name == 'record.nameChain '}}" ng-repeat="x in chains" value="{{x.type}} {{x.name}}">{{x.name}}</option>
The ng-changepart is used to update another select.
Do you have an idea on how I can achieve this?
Thanks.
I ended up using
<select ng-model="record.nameChain" ng-options="x.name as x.name for x in chains">
Thanks to the people who suggested using options.
Related
I need to search on select tag options.
I tried datalist it works but in input when I choose option goes value of option and I don't need that, with select there is no such problems.
Also tried jquery chosen and select2 didn't work for me, maybe because I use angular and it overwrites something.
Tried angular material with its mat-form-field does not work.
Hope someone could help.
Here's my code
<select class="form-control form-control-sm"
[(ngModel)]="filters.userId">
<option value=""></option>
<option *ngFor="let user of users"
[value]="user.id">
<!--{{ user._profile?.lastName }}-->
<!--{{ user._profile?.firstName }}-->
<!--{{ user._profile?.fatherName }}-->
{{ user.fullName }}
</option>
</select>
The select field does not offer the option, to do a filter search trough it's items. Since you use angular, you can write your own component for this.
I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:
<td>
<select class="form-control" ng-model="$ctrl.selectedRC" ng- options="r.ccd as (r.OName + ' -- '+ r.RCName) for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
</td>
Using ng-repeat:
<select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
<option ng-repeat="r in $ctrl.RC"
value="{{r.OName}}"
ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
</option>
</select>
I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each <td> have its own dropdown without affecting the rest of the rows.
Simply because you use the same ng-model for all rows.
You need to define a different one for each row.
You do this:
ng-model="$ctrl.selectedRC"
but you need something like this:
ng-model="$ctrl.selectedRC[$index]"
where $index is your reference to the row.
I have a drop down select menu and i want to store the selected value in the controller.i.e If office1 is selected then Office! is selected in the scope and so.
I am unable to store the value in the controller as I am new to angularjs.Can somebody Help
Heres my dropdown code
<div class="col-xs-12">
<h5>Select the System:</h5>
<select id="repeatSystem" ng-model="selectedSystem" style="width: 100%">
<option ng-repeat="(key,value) in systems" value="{{key}}">{{key}}</option>
</select>
<select id="repeatOffice" ng-model="selectedState" style="width: 100%">
<option ng-repeat="system in systems[selectedSystem]" value="state">{{system}}</option>
</select>
</div>
here is the plunker link
http://plnkr.co/edit/nNsM4VMVeHXS2hDIsAAd?p=preview
Because you are binding select dropdown with ng-model then you can simply access these value in your controller.
This will give you first dropdown selected value
$scope.selectedSystem //same in view {{selectedSystem}}
This is for second
$scope.selectedState //same in view {{selectedState}}
DEMO select value and check.
Updates
I have updated this following line, where you had hardcoded value="state" to i changed it to value="{{state}}":
<option ng-repeat="state in result[selectedArea]" value="{{state}}">{{state}}</option>
See Updated DEMO
I'm a bit confused about how to answer the question. The value of the drop-downs in the controller will be bound to the variables:
$scope.selectedArea and $scope.selectedState depending on what values are selected in the view. The value attribute that you're setting is overriding it however.
I've updated your plunkr here:
http://plnkr.co/edit/F2KqqtWKvPndv7y6un1F?p=preview
I've also demonstrated setting initial values in your dropdowns that will remove that annoying "blank" option.
You can get the answer from this link http://forum.ionicframework.com/t/get-selected-value-from-a-select/20241
I am using bootstrapDualListbox
JS
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({
moveOnSelect: false
});
HTML
<select multiple="multiple" size="10" name="duallistbox_demo1[]" ng-model="selectedStaff"><option ng-repeat="staff in staffs" value="{{staff.userId}}">{{staff.firstName}} {{staff.lastName}}</option>
</select>
If I use options as different values(not from ngRepeat) swapping is fine. If I use from ng-repeat, on selection all values are swapping rather selected. How I solve this?
Please check using ng-options with select instead of options with ng-repeat.
<select multiple="multiple" size="10" ng-options="staff as staff.firstName for staff in staffs track by staff.userId" name="duallistbox_demo1[]" ng-model="selectedStaff">
This is something I've struggled with for quite a while now. My objective is to populate the select box with a variable list of greetings and have it automatically select the first one instead of simply being a blank space.
<label>Check me to select: <input type="checkbox" ng-model="selected">
</label><br/>
<select> id="greetings">
<option ng-repeat="greeting in MyCtrl.greetingList"
ng-selected="selected">{{ greeting }}</option>
</select>
The ng-selected directive (and indeed the selected attribute, which would actually be a simpler solution) do indeed select an item from the list on form load, but it always defaults to the last item on the list. I could probably capture the first element in the list and generate the rest, but I can't help but think there's a more elegant solution out there. Any ideas?
By the way, I know ng-options is better than ng-repeat. The problem is that I need each of my options to have an ng-click directive. I can't achieve that with ng-options.
You should try $first plus assign a model to select. in this way
<select data-ng-model="greetings">
<option data-ng-repeat="greeting in MyCtrl.greetingList"
data-ng-selected="$first" data-ng-value={{greeting.id}}>{{ greeting }}</option>
</select>
There are some special properties too. All of them are as below
$index
$first
$middle
$last
$even
$odd