I want to know how can i duplicate a select tag when i already render it using this lists..
var lists = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]
and there is a add button to duplicate this select tags.
I created fiddle for this:
http://jsfiddle.net/rdy4e4xx/
I am thinking to used directives for this but i dont know where to start. Thanks guys.
I think you are looking for something like this (Updated):
HTML:
<div ng-controller="ListsCtrl">
{{ mySizes }}
<select ng-model="selectTag.value" ng-repeat="selectTag in selectTags">
<option value="">- - Make Selection - -</option>
<option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
</select>
<button type="button" ng-click="duplicateSelectTag()">Duplicate Select Tags</button>
Selected values:
<ul ng-repeat="selectTag in selectTags">
<li>{{selectTag.value}}</li>
</ul>
</div>
JS:
var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
$scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}];
$scope.selectTags=[{
value:null
}];
$scope.duplicateSelectTag = function() {
$scope.selectTags.push({});
}
});
Demo
I think you are looking for this
<div ng-controller="ListsCtrl">
{{ mySizes }}
<select ng-model="mySizes">
<option value="">- - Make Selection - -</option>
<option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
</select>
<button ng-click="dupplicate(mySizes)">Duplicate Select Tags</button>
</div>
var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
$scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}];
$scope.dupplicate = function(mySizes){
$scope.sizes.push({name: mySizes});
};
});
Related
In my Django app (using {% load crispy_forms_tags %}) I have a following dropdown menu:
<div id="div_id_report_division" class="form-group">
<label for="id_report_division" class=" requiredField">Test<span class="asteriskField"></span</label>
<div class="">
<select name="report_division" class="select form-control" required="" id="id_report_division">
<option value="" selected="">---------</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select> </div> </div>
I wish to remove option number 5 on page load. My Javascript on post.html with everything is:
<script type="text/javascript">
function on_load(){
/*
option 1.:
document.querySelector('id_report_division option[value=5]').remove();
option 2.:
var x = document.getElementById('id_report_division');
x.remove(5);
option 3.:
document.querySelector('#id_report_division option[value=5]').remove();
const first = document.querySelector("[id='id_report_division']");
*/
document.querySelector("[id='id_report_division' option[value=5]]").remove();
}
on_load();
</script>
How can I easly remove this option? It would be better if I could remove option where text is E, in case that value changes. But there will always be only one text 'E', no need to itterate.
You can iterate the select options list, check the inner text and remove like so:
var selectobject = document.getElementById("id_report_division");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].text == 'E')
selectobject.remove(i);
}
I want to make it if you pick something in dropdown list except Condition, it will search all elements for that and show them.
my jquery:
$('#searchbtn').click(function(){
var e = document.getElementById("condition");
var strUser = e.options[e.selectedIndex].value;
$('.item').each(function(){
var itemcondition = $('.condition').html();
if (itemcondition === strUser.toLowerCase()){
$(this).show();
}
if (itemcondition !== strUser.toLowerCase()){
$(this).hide();
}
});
})
my html:
<select id="condition">
<option>Condition</option>
<option value="factory new">Factory New</option>
<option value="minimal wear">Minimal Wear</option>
<option value="field tested">Field Tested</option>
<option value="well worn">Well Worn</option>
<option value="battle scarred">Battle Scarred</option>
</select>
this is how element looks like:
<div class="item" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
Here is how you can fix it.
Your html attribute and javascript code should be changed. You should give option value with ID/slug of condition of your products -- it shouldn't have space as we will manage this data easier in the next step.
<select id="condition">
<option>Condition</option>
<option value="factory-new">Factory New</option>
<option value="minimal-wear">Minimal Wear</option>
<option value="field-tested">Field Tested</option>
<option value="well-worn">Well Worn</option>
<option value="battle-scarred">Battle Scarred</option>
</select>
and your products list should classes corresponding your selected option value like this.
<div class="item factory-new field-tested" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
And your javascript should be changed almost entirely. It's much easier to understand.
$('#searchbtn').click(function() {
var $condition = $("#condition");
var condition = $condition.val();
$('.item').hide();
$('.item.' + condition).show();
})
hope it helps.
I have a dropdown menu in HTML as below, with a default option. I am using ng-options to generate the remaining options thus binding these and not the first with the variable dropdown.
<td>
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option> <!-- default -->
</select>
</td>
Results in to the following HTML
<td>
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option>
<option value="0" label="item1">item1</option>
<option value="1" label="item2">item2</option>
<option value="2" label="item3">item3</option>
</select>
</td>
I need to support a reset button, which should reset the drop down to the default option "Select an item". Since this option is not bound to the model. i cant do something like this -
$scope.dropdown = items[0] // this would select item1
or even
$scope.dropdown = null
How can i reset my dropdown to the first option ?
try like this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.items = [{name:"ali"},{name:"reza"}];
$scope.dropdown = $scope.items[0];
$scope.reset = function(){
$scope.dropdown = {};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option>
</select>
<button type="submit" name="button" ng-click="reset()">Reset</button>
</div>
In AngularJS, how do I to set value from a select to a textarea field when a user selects.
<div class="controls" ng-controller = "TemplateCtrl">
<select ng-model = "template" ng-options="template.fname for template in templates">
<option value="">-- choose template --</option>
</select>
Currently selected: {{ {selected_template:template} }}
</div>
Could someone please help me.
HTML
<div ng-controller = "fessCntrl">
<select ng-model = "template" ng-options="template.fname as template.fname for template in templates">
<option value="">-- choose template --</option>
</select>
Currently selected: {{ template }}
</div>
JS
$scope.templates =[
{'fname':'hello there1'},
{'fname':'hello there2'},
{'fname':'hello there3'}
];
Demo Fiddle
I need to use ng-repeat with the options within a Select menu like so
<select name="category" id="category" ng-model="rumor.category" validation-pattern="requiredOnly" error-icon>
<option ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</option>
</select>
However on rendering my select is empty and when inspecting the console I see the following:
<select id="category" class="ng-scope ng-pristine ng-invalid ng-invalid-required" ng-model="rumor.category" name="category" required="required">
<option value="? undefined:undefined ?"></option>
</select>
Now I know I should really use ng-options on the select menu however I wish to include angular-ui / ui-select2 which is incompatable with ng-options and the documentation recomends using a repeater (see https://github.com/angular-ui/ui-select2)
When I use the same repeater on a different tag, for example:
<p ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</p>
the repeater works as expected. Any ideas why this is?
Thanks in advance.
You shouldn't use ng-repeat for select options. Use ng-options (link) instead:
<select name="category"
id="category"
ng-model="rumor.category"
validation-pattern="requiredOnly"
error-icon
ng-options="c.cat for c in formOptions.categories">
</select>
You can use select option with ng-repeat.
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.categories = [ {'cat' : '1'}, {'cat' : '2'}, {'cat' : '3'}, {'cat' : '4'}] ;
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="item.value">
<option ng-repeat="cat in categories" value="{{cat.cat}}">{{cat.cat}}</option>
</select>
</div>
</div>
You can also fiddle: http://jsfiddle.net/usmanfaisal/vHw7N/