I have following code:
<h3>Дата наведвання:</h3>
<select class="form-control" size=info.size()>
<option ng-model="i.isSelected" ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>
<div class="container">
<table class="table">
<tr>
<td ng-repeat="i in info"><p ng-if="i.isSelected">Name: {{i.name}}</p></td>
</tr>
</table>
</div>
Sorry for dump question. This is simple, I would like my table to show data according to selected date. Please, help me to figure out.
ng-model should be there on select not on option tag. As ng-model does only working on input,textarea,select out of the box.
Markrup
<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()" ng-model="selectedInfo">
<option ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>
Where ng-model="selectedInfo" will enable two way binding over your select, & selected value would be available inside selectedInfo $scope variable.
The most preferred way to dealt with select with option by using ng-options
<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()"
ng-model="selectedInfo"
ng-options="i as i.date for i in info">
</select>
For showing selected to date you could use selectedInfo variable, you don't need to loop over each element of your info collection. You could directly do {{(info | filter: {date: selectedInfo: true })[0].Name}}(I'd not prefer to go for this approach).
As you're much interested to take whole element inside ng-model, ng-options can easily achieve(as I said earlier its preferred). In ng-options case you could do {{selectedInfo.Name}}
Related
I am using select inside ng-repeat. I am trying to map value coming from my api to select as selected value. I don't know what's wrong going from my side, please correct me.
Here is JSfiddle
HTML code
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="selectedType">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
JS code
$scope.trips=[];
$scope.trips=[{id:1,type:'confirmed'},{id:2,type:'cancelled'}];
$scope.tripTypes=['Confirmed','Quotation'];
I was making so silly mistake i guess because after doing below changes my code worked, i changed ng-model to trip.type from selectedType, so only it is possible for ng-selected to check condition.
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="trip.type">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
Here is working fiddle Check now
So, I have this ng-repeat which has a model inside subj.Prerequisites, subj.Prerequisites can contain an array e.g ['SUBJ1', 'SUBJ2']. What i wanted to do is when i click on my input text inside this ng-repeat there will be a shown list of subjects below which allow multiple selection and then with the multiple selected items should be binded to the clicked input text.
<div ng-repeat="subj in sem.subjects track by $index">
<md-input-container flex class="no-error-spacer uk-margin-remove">
<label>Prerequisites</label>
<input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true">
</md-input-container>
</div>
<select multiple>
<option ng-repeat="sb in subjects" value="sb.subjectCode>{{ sb.subjectCode }}</option>
</select>
Its kind the hard for me though. Please someone help me. Thank you so much!
As per my understanding of your question. Please look into this working plunker :
<div ng-repeat="subj in subjects track by $index">
<label>Prerequisites for {{subj.subjectCode}}</label>
<input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
</div>
<select ng-model="multiPre[selected]" multiple>
<option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
</select>
https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview
PS: I have left {{multipre}} intentionally for your understanding of model.
Edit Start :
Try This :
https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview
This addressees to your requirement.
I have a ng-repeat select element, which is formed from the MySQL table, problem is - can't output scope parameter outside of the ng-repeat of the selected option.
What I tried doing:
<select ng-model="rec_name">
<option value=" ">Select</option>
<option ng-selected="{{rec_name == item}}" ng-repeat="item in tasks" value="{{item.name}}">{{item.name}}</option>
</select>
<div>Operator is: {{rec_name}}</div>
Basically, it's almost what I need, but it only shows the value="{{item.name}}" in the Operator div field; which is logically understandable.
Thought, that simply making the equivalence of item and rec_name will allow me to do something like
<div>Operator is: {{rec_name.param}}</div>
Again, what am I trying to do is to output the task.param of currently selected option,formed from tasks, in the isolated from ng-repeat div.
How do I call other item parameters?
Thank you for help.
you can do like this:
<select ng-model="rec_name">
<option value=" ">Select</option>
<option ng-selected="{{rec_name == item}}" ng-repeat="item in tasks" value="{{item.name}}">
<a href="#" ng-click="rec_name == item">
{{item.name}}
</a>
</option>
</select>
<div>Operator is: {{rec_name}}</div>
Cheers:)
You have to manually handle the click event.
Use the following code
HTML
<select class="form-control" ng-model="selecteditem"
ng-options="selecteditem as selecteditem.brand for selecteditem in dropdownval">
</select>
<div>Operator is: {{clicked_rec_name}}</div>
Have the following method in your controller
$scope.getClickedItem=function(item)
{
$scope.clicked_rec_name=item.rec_name;
}
LIVE DEMO
I want to access ng-model value from one div to another div.
HTML:
<div class="form-group" ng-repeat="key in condition.keys">
<select class="form-control" ng-show="key.aggregator" ng-model="key.aggregator" ng-options="field.name as field.label for (name, field) in aggregators"></select>
<select class="form-control" ng-model="key.field" ng-options="s.field as s.field for s in subSchema($parent.condition,$index)" ng-change="onFieldChange($parent.condition,$index)" required>
<option value="">choose one</option>
</select>
</div>
<div class="form-group mb-left">{{key.field}}
<select class="form-control" ng-model="condition.operator" ng-options="field.name as field.label for (name, field) in fields | instanceFilter :key.field :condition" required>
<option value="">choose operator</option>
</select>
</div>
</div>
As you can see there is a key.field in ng-model in one div. I want to access this ng-model value on another div where you can see instanceFilter. Is it possible? Thanks in adavnce please solve this issue
In general, you can use the same ng-model binding in as many divs as you like which sit under the same scope.
It's not obvious what your code is trying to accomplish, but the "key.field" which you are binding to within your ng-repeat div is not in the same scope as the rest of the page outside the ng-repeat.
You should assign both the ng-model="key.field" to a different variable which is on the outer scope and not part of the key which only has scope for that individual item in your collection.
Go to that controller,
then assign
$rootScope.key.field=" ";
**
The rootScope is available in the entire application.
**
I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/