Retrieve angular ng-repeat scope outside ng-repeat - javascript

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

Related

Angular 14: <select> displays incorrect value when updating data

I use [ngModel] to assign the currently selected option to a dropdown menu, and when the page is loaded initially this works fine, but sometimes when updating the data while the page is still loaded, the dropdown displays an incorrect value, but the model itself is still correct.
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [ngModel]="effect.impact"
(ngModelChange)="updateImpact($event, j)">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
Verifying {{effect.impact}} shows that the correct template is currently selected, but the dropdown box will still list an incorrect value.
How can I fix this problem?
Can you try something like this?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [value]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>
Did you try using [ngValue] instead of [value]?
<select *ngIf="effect.type == ruleEffects.ApplyTemplate" class="form-select"
[disabled]="readOnly" [(ngModel)]="effect.impact">
<option *ngFor="let template of templates" [ngValue]="template.TemplateName">
{{template.TemplateName}}
</option>
</select>

How to use select inside ng-repeat and keep value selected on api call data

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

Angularjs include an empty option in html select using ng-repeat - Umbraco back end with Angularjs 1.1.5

As the title says I get an empty option in my HTML when I'm using ng-repeat instead of ng-options. The reason I'm using ng-repeat instead of ng-options is to be able to set a class on every option depending on it's value. I tried using a directive with ng-options but I did not achieve desired result. The problem is not that the default selected value is not set as you can see from the generated HTML. I have a suspicion that the empty option comes from the select ng-model but I'm not sure.
My HTML looks like this:
<select ng-model="selectedProduct.code" ng-init="selectFirstProduct()" ng-change="getArticle()" size="8">
<option ng-selected="{{product.code == selectedProduct.code}}" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product )" value="{{product.code}}">{{product.name}}</option>
</select>
This results in HTML to look like this:
<select ng-model="selectedProduct.code" ng-change="getArticle()" size="8" class="ng-pristine ng-valid">
<option value="? string:200230 ?"></option>
<!-- ngRepeat: product in productsForPriceList -->
<option ng-selected="true" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="200230" class="ng-scope ng-binding" selected="selected">Product 1</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300025" class="ng-scope ng-binding">Product 2</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300206" class="ng-scope ng-binding">Product 3</option>
I'm using ng-init="selectFirstProduct()" to set selectedProduct.code to the first value in the list. However if I omit this code and set selectedProduct.code when I'm getting the list the result is still the same.
I'm using Umbraco version 7.3.5 back end with Angularjs version 1.1.5.
Initialize selectedProduct.code and it will eliminate the blank option from the list.
Initialize the Object
$scope.selectedProduct = {};
Set A default to the List
$scope.productsForPriceList.YourObjectKey.IsDefault = true;
Add this line code to Controller to initialize your option
$scope.selectedProduct.code = $filter('filter')($scope.productsForPriceList, {IsDefault: true})[0];
You need to add the dependency $filter to the controller

Startup value does not set selected value

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/

AngularJS, select onChange or ngChange

I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".
With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above

Categories

Resources