Something wrong in BINDING in Angular - javascript

I have two select. If you chose an item in the first, automatically the second one fills with the subarray. It works. But I want to add new field, same field but isolated. Now, if I add new fields, the others selection change. I want to prevent this. How can I do? Thank you! CODE
<div data-ng-repeat="food in foods track by $index">
<select ng-model="select1" ng-options="a.id as a.nome for a in list.products" ng-change="selectLot(select1)">
<option value="">-- Select Product --</option>
</select>
<select ng-model="select2" ng-options="a.id as a.value for a in Subarray" ng-if="Subarray" ng-change="lotSelect(select2)">
<option value="">-- Select Lot --</option>
</select>
</div>
<button ng-click="newLine();">Add Line</button>
<button ng-click="removeLine();" class="{{$index}}">Remove</button>
<h1>INFO ABOUT SELECTION</h1>
{{allInfo}}
P.S. also {{allInfo}} doesn't work and I don't know why... (it should contains the info, like HERE

Your code should look like this:
as you can see, I send the selectedProduct to the second selection.
<select ng-model="selectedProduct" ng-options="a as a.nome for a in list.products">
<select ng-model="selectedLot" ng-options="a as a.id for a in selectedProduct.lots" ng-if="selectedProduct.lots">
You won't need to change anything in the controller.

Related

How can store html DOM elements with applied inputed values as string

I want to store div as a whole in DB. After then I'd like to preview this page from the stored string value in DB.
If I use $(selector).html() then I can get only HTML elements with not apply inputed value.
Suppose my page is writed as follows.
<div id="test_div">
<span>this is test</span>
<select>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<textarea>This is test</textarea>
</div>
I input some text in the Text area and select a special option in the Select box.
After then I want to store this page state as a string.
I write code as following and save this in DB.
var content = $("#test_div").html();
But I can't get applied value.
I want to get like this. (When I select option3 and add text "Welcome!" in textarea)
<span>this is test</span>
<select>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3" selected>option3</option>
<option value="4">option4</option>
</select>
<textarea>This is test. Welcome!</textarea>
How can I do it?
Thank you.
This was wrong to attempt it.
The design itself was wrong and that doing so caused many problems.
The customer who required this method proposed a different method and solved the problem by storing all information from the table as individual tables.**

How to get default value in dropdown list?

I have a drop down list and it has two values. if user didn't select none of the value it should set a default value.
<select class="form-control" ng-model="abc.code" required>
<option ng-repeat="x in codeList" value="{{x}}" ng-selected="codeList[1]" >
{{x}} </option>
</select>
Can someone help me.
you can add something like this
<option value="didnt select" selected hidden>please select one option</option>
for default value statically in your select input

Auto-select in Materialize Multi-Select drop-down

I have a multi-select field in materialize:
<select multiple>
<option value="somevalue" class="{{#if $eq isActive}}active{{/if}}">Some Value</option>
</select>
and want to auto select any values returned from the database when the user goes into edit mode.
In looking at the section in chrome dev tools I see it creates an li with a checkbox and the li has class="active" when it's checked.
I've tried setting that class programmatically in javascript, but still the selections aren't checked.
Is there something special I need to do to get those options to check "automatically" for edit modes?
I'm using Meteor and Blaze to create this layout, so keep that in mind.
The below approach should work,
<select multiple>
{{#if $eq isActive}}
<option value="somevalue" selected="selected">Some Value</option>
{{else}}
<option value="somevalue">Some Value</option>
{{/if}}
</select>
Also, make sure that the helper that determines whether the item is active or not to return the correct value.

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

How to select option in select tag

I need to add javascript or jquery code in order to select option from combobox. There are 25 comboboxes and there value read from database. Please find below code fragment
option which is selected by user needs to be selected. It has to be read from database.
<div class="control-group">
<label class="control-label">A. Nails are Clean *</label>
<div class="controls">
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely">Rarely</option>
</select>
</div>
</div>
If you add id attribute to select
<select name="obs_chart_nails_clean" id="obs_chart_nails_clean">
and add jquery to your page, then
$(document).read(function(){
$("#obs_chart_nails_clean").val("Rarely");
});
will select third option.
What do you have server-side? You should be able to produce html with correct option already selected.
In addition to the existing answers, the obvious no-javascript solution must be noted:
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely" selected>Rarely</option>
</select>
Simply add the selected attribute to one of the options.
$(document).ready(function(){
$('#obs_chart_nails_clean').val("Sometimes");
});

Categories

Resources