What I'm trying to do is rather simple, I would think. I am trying to update a few values linked to an object in my controller based on what is selected from a select box. Hopefully you guys can shed some light on what I'm doing wrong.
My controller instantiates the object (which I'm not sure if I actually need to do):
$scope.newInvoice = {}
Then my html provides a dropdown box with a list of invoices that can be selected and the table should auto updated with the values from the selected invoices, but it does not:
<tr>
<td>
<select ng-model="newInvoice">
<option ng-repeat="name in names" value="{{name}}">{{name.Name}}</option>
</select>
</td>
<td>TBD</td>
<td>{{newInvoice.PoNumber}}</td>
<td>{{newInvoice.Price | currency}}</td>
<td>
<input type="number" ng-model="newInvoice.Quantity"/>
</td>
<td>{{newInvoice.Price * newInvoice.Quantity | currency}}</td>
</tr>
Essentially, the table does not fill in with the values provided from the select box. But if I print newInvoice to the screen with <pre>{{newInvoice}}</pre> I can see that newInvoice does in fact have all of the values, all properly named. So it would seem that the select box is binding well with the model. Any ideas?
Use ng-options instead of rendering options using ng-repeat, because when you use ng-repeat to render options, it does fill value attribute with object but that has been stringified. Where as if you use ng-options behind the scene it does assign actual object value to mentioned ng-model variable.
Markup
<select ng-model="newInvoice" ng-options="name.Name for name in names"></select>
Related
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 am using KnockoutJS to render a Select control but to do so I am using the ko foreach binding rather than the options binding. The Select area currently looks like this:
<select class="form-control" data-bind="value: selectedItem">
<option>-- Select an Item --</option>
<!-- ko foreach: groups -->
<optgroup data-bind="attr: { label: name }, foreach: items">
<option data-bind="text: name, option: $data"></option>
</optgroup>
<!-- /ko -->
</select>
So why am I not using the options binding? The reason is because I need to send back 2 values to the server rather than just one, where just using the value field would not be enough. So underneath this control I have 2 hidden fields that looks like this:
<input type="hidden" name="Model.SelectItemId" data-bind="value: selectedItem().itemId" />
<input type="hidden" name="Model.SelectedItemTypeId" data-bind="value: selectedItem().itemTypeId" />
This all works fine, renders as expected and passes the correct values to the server. However now I want to ability to set a default value on the select field based on a value passed into the page, and I can't seem to get this to work.
I've tried setting a value in the observable on the model like this:
function ViewModel() {
...
this.groups = ko.observable(getGroups());
// Set selected to a hardcoded item just for now to test
this.selectedItem = ko.observable(this.groups()[0].items[1]);
}
This unfortunately doesn't make a difference since when the page renders it still shows the default -- Select an Item -- option in the control and the 2 hidden fields still have a value of 0. Note however that when I remove the select control from the view and render the page the 2 hidden fields do have the default item values set so it's as if the select control is resetting the selected item back to the first default item.
I've also tried setting an afterRender on the select control and the ko foreach so that I can set the selected item that way after knockout has finished rendering, but I run into the same issue and nothing has changed.
Any help on this issue would be much appreciated. Please let me know if you want me to go into more detail on a certain area to help resolve the issue.
I have a few comments:
ViewModel.groups should be an observableArray.
Try adding a non-observable defaultItem parameter to your ViewModel:
function ViewModel() {
this.groups = ko.observableArray(getGroups());
this.selectedItem = ko.observable();
this.defaultItem = this.groups()[0].items[1];
}
An 'option' (singular) binding doesn't exist. Update your binding on the options element, changing 'option' to 'value', and add this 'attr' component:
<option data-bind="text: name,
value: $data,
attr: { selected: ($data === $parents[1].defaultItem ? 'selected' : null) }">
</option>
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
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
I am new to AngularJS. I am trying to filter the data set shown based on the option selected with a select box.
<div ng-controller="CurrentTrandetailsController">
<div>
<div class="pull-right">
<label for="show-filter" class="show-label">Show </label>
<select name="show-filter" ng-model="searchText.accruedcard" id="show-filter" ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails ">
<option value="">All</option>
</select>
</div>
<h3>Current trandetails</h3>
</div>
<div>
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText">
<td>{{trandetail.dateAccrued}}</td>
<td>{{trandetail.accruedcard}}</td>
<td>{{trandetail.placeAccrued}}</td>
<td>{{trandetail.discountcents}}</td>
<td>{{trandetail.shortExpiryDate}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I used the example given in http://docs.angularjs.org/api/ng.filter:filter, which uses an input box to filter. On selecting a given card, it seems to filter fine. However, when I select "All", which has its value set to "", it doesn't display all the entries (clear the filter). However, in the example shown, when the text box is cleared, all the entries are displayed.
What am I doing wrong?
You'll need to change your select to:
<select name="show-filter" ng-model="searchText" ...
instead of
<select name="show-filter" ng-model="searchText.accruedcard" ...
Explanation: From what I've seen, it's not common to use a hard-coded option along with ng-options and this is contributing to the problem. The filter uses the select's model, which currently is an object instead of a string as in the Angular example. Object patterns are okay but in this case the object's properties become null when All is selected because it is not wired into the select the same way as the rest of the options.
This is what causes the searchText filter to fail because it expects valid strings (even when using an object for the matching pattern).
By using a string primitive for the select's model, the All 'hack' is preserved because it causes the select's model to become ('') instead of null, which will match everything and all the results are shown.
I ran into the same problem. The way that I fixed it was using .toString() in the filter.