Question
How do I make the appropriate drop down visible when I click on the image or the checkbox.
In the end the radiobox will be hidden.
Currently the radio button does get checked but it does make the options appear properly? I think it's a scoping issue.
live code
I have a collection of colors and sizes:
app.controller('Ctrl', function ($scope, $filter, $http) {
$scope.productData = {
"colors_and_sizes": {
"data": {
"Black": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
},
"Blue": {
"swatch_image": 'http://lorempixel.com/50/50',
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
}
}
}
};
});
HTML: here is my form
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" ng-checked="selected" name="colors" ng-model="$parent.myColor" ng-value="key" />
<img ng-click="selected = true" ng-src="{{val.swatch_image}}" alt="">{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>
Currently, you defined $parent.myColor in order to save a value of the radio button. So if you want to be able to show the drop down based on the selected image, you can use ng-click on the img tag, as you already did, and assign the new value to it.
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" name="colors" ng-model="$parent.myColor" ng-value="key" />
<img ng-click="$parent.myColor = key" ng-src="{{val.swatch_image}}" alt="">{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>
Try it yourself.
Related
I have a form. Whenever a user hits the enter key on a text input, or when they tap or click on a radio button, I want to be able to set the focus to the next
"formItem" div.
The structure of my form is set up like this:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
Every input has a tabindex, so I was considering using this somehow, but once a user has made a selection I do not wish to necessarily just move the focus to the next tabindex because it may be in the same radio group. I wish to set the focus to the next "formItem" div.
Please see the following Plunkr for a larger code example:
http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
You don't need tab index, you can use the order of the tab items inside the form. I would make a myFormItem directive like this:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
and you need to add the my-form-item attribute to each .formItem (btw, you should probably use kebab-case for classes)
After page load, the model and radio button display correctly.
However, when clicks the button to change the rank of the list item, there are something wrong about the radio button checked states. You can see the model value is correct, which is displayed at the left side.
So, why the button not checked and how to fix it?
Many thanks
HTML:
<body ng-app="RadioApp">
<section ng-controller="RadioController">
<div ng-repeat="item in list">
<div ng-model="item.rank">Rank: {{$index + 1}}</div>
<div>
<span>{{item.flag}}</span>
<span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="1">red</label></span>
<span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="2">green</label></span>
<span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="3">yellow</label></span>
<span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="4">blue</label></span>
<span><label><input type="radio" name="flag_{{$index}}" ng-model="item.flag" value="5">pink</label></span>
</div>
</div>
<div>
<button ng-click="changRank()">change</button>
</div>
</section>
JS:
var app=angular.module("RadioApp", []);
app.controller("RadioController", function($scope){
$scope.list = [{flag:1},{flag:3},{flag:5}]
$scope.changRank = function(){
var targetRule = $scope.list.splice(2, 1);
$scope.list.unshift(targetRule[0]);
}
});
PS: I'm a new user, sorry for couldn't provide capture for the question.
Ah, simply change your repeater to
ng-repeat="item in list track by $index"
This will force Angular to only keep track of your list items by their place in the array.
Plunker demo - http://plnkr.co/edit/Hszr5FjKblQGip7kc8Q1?p=preview
I have a list of checkboxes in my app:
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item"
ng-checked="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
The data, that exists on the $scope as segment.items, looks something like this:
[
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
This renders fine on load, and the correct checboxes are checked. However, if I select a checkbox, the label disappears and the binding appears to be lost. If I deselect a checkbox, it seems to work fine, but if I select it again, it disappears as well. No errors show up in the console.
This is what it looks like on load:
And as soon as I click on "English" I get this
I'm new to Angular so I suspect I am doing something obvious wrong. Can anybody please point me in the right direction?
pointing your ng-model to ng-model="item" will cast your item into a boolean.
Also, you should not use ng-model with ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked
what you should do is the following :
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
You need to bind the ng-model directly on your enabled boolean attribute:
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.segment = {
items: [
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{segment.items}}
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
</div>
I have started learning Angularjs and i am trying to implement in my project but Confused with condition.
What i want:-
I have few button with different colors and upon click of those buttons i want to change color of selected label. For selected label i have taken hidden field which stores value of label clicked.
So I want to first check that hidden field value and then change its color based on button click.
I came across these
<input type="button" value="Red" ng-click="myStyle={color:'red'}">
<label id="lbl1" ng-style="myStyle">
<label id=lbl2" ng-style="myStyle" >
<input id="hf" type="hidden" runat="server" />
But this will change color for all labels But i want to change for only one control based on hf value.
Hope its Understanable. Thanks in advance.
<div ng-app="" ng-controller="myController">
<input type="button" value="Red" ng-click="updateColor()">
<label id="lbl1" ng-style="myStyle">test</label>
<label id="lbl2" ng-style="myStyle">test2</label>
<input id="hf"
name="hf"
type="text"
runat="server"
value="lbl1"
ng-model="hf"/>
<pre>myStyle={{myStyle}}</pre>
<pre>hf={{hf}}</pre>
</div>
function myController($scope){
$scope.hf = document.getElementById('hf').value;
$scope.updateColor = function(){
document.getElementById($scope.hf).style.color = 'red';
}
}
http://jsfiddle.net/pa2yLtqz/
Question:
How do I show all radio buttons but only one dropdown. This shown dropdown is one that reflects the currently selected radiobtn?
Live Code
Html:
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" name="colors" ng-model="myColor" ng-value="{{key}}" />{{key}}
<div class="size-pick">
<select ng-model="mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
</form>
javascript:
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope, $filter, $http) {
$scope.productData = {
"colors_and_sizes": {
"data": {
"Black": {
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
},
"Blue": {
"sizes": "X Small, Small, Medium, Large, Xlarge, XX Large"
}
}
}
};
});
Use the ng-hide or show directive on the div wrapping the select statement. The problem you're probably running into is that each ng-repeat iteration creates it's own scope, this means that each ng-model you create is completely independent.
You can see this here: http://jsfiddle.net/v2r9y6x2/, when each select radio is clicked it prints a different value underneath itself, in both cases this is the value of ng-Model being set:
You can fix this by referring to the parent scope with $parent.property instead of just the property name. This will assign the value to the parent controllers scope and work as you expect.
http://jsfiddle.net/djwruftr/
<form ng-app="app" ng-controller="Ctrl">
<div class="color-pick" ng-repeat="(key, val) in productData.colors_and_sizes.data">
<input type="radio" name="colors" ng-model="$parent.myColor" ng-value="key" />{{key}}
<div class="size-pick" ng-show="$parent.myColor==key">
<select ng-model="$parent.mySize" ng-options="size for size in val.sizes.split(',')"></select>
</div>
</div>
myColor: {{myColor}}<br/>
mySize: {{mySize}}
</form>