I'm trying to bind a radio button to true when the radio button is selected and to false when the radio button is not selected. I must be missing something really obvious because I haven't been able to do it yet.
I have a simple collection, eg:
$scope.collection = [
{ id: 1, selected: true},
{ id: 2, selected: false},
{ id: 3, selected: false}];
And I wish to bind the "selected" property to whether the radio button is checked or not. Sounds simple enough but ng-model binds to undefined. ng-checked almost works, it displays the correct result but never actually updates the value...
Plunkr with the problem
You can bind the radio buttons to the right object fields in from the controller $scope:
angular.module('ExampleApp', [])
.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.radioContent = [
{txt: 'One', checked: false},
{txt: 'Two', checked: false}
];
$scope.$watch('radioContent', function (now, then) {
console.debug('Something changed', now);
}, true);
}]);
And the HTML:
<div ng-app="ExampleApp" ng-controller="ExampleCtrl">
<div ng-repeat="radio in radioContent">
<input type="radio" ng-model="radio.checked">{{radio.txt}}
</div>
</div>
Here's a working Fiddle
Seems like ng-bind and ng-selected don't work that well with radio buttons, but if you change the radio buttons to be checkboxes, the code works as expected.
And using #Ashesh's answer, the radio.checked property of a button still becomes undefined after messing with the radio button once.
Working plunkr
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*"
data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
angular.module("sampleapp", [])
.controller('samplecontroller', function($scope,$rootScope) {
$scope.collection = [
{ id: 1, selected: true},
{ id: 2, selected: false},
{ id: 3, selected: false}];
});
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div class="radio" ng-repeat="element in collection">
<span ng-bind="element.id"></span>
<span ng-bind="element.selected"></span>
<input type="checkbox" name="whatever" ng-model="element.selected">
</div>
</body>
</html>
However, if you change the selected property into true or false and NOT "true" or "false", it works.
Related
I'm still new to AngularJS, and I've tried looking for the solution to my problem but I can't seem to find one that specifically addresses this. Sorry if this has been asked before! And by new, I mean, I'm still pretty clueless on how much of this works.
I have an array of items that I'm displaying with ng-repeat. Each item has a drop down where they can select Yes or No, or leave it unselected. The data is sorted so that anything that's set to Yes or No moves to the top of the list.
I currently also have a checkbox that allows them to Hide an item, which hides it, and moves it to the end of the array, so that it doesn't clutter them up.
I would like to instead have a button that hides all unselected items (a value of neither Yes nor No), instead of making them hide one at a time.
Second: Any item where they've selected Yes should have their names displayed in Field One; Any items where they've selected No should have their names displayed in Field Two.
Here is my code:
var app = angular.module('List', []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.selected = false;
$scope.pList = [
{
id: '1',
title: 'Apples',
checked: false
},
{
id: '2',
title: 'Oranges',
checked: false
},
{
id: '3',
title: 'Bananas',
checked: false
},
{
id: '3',
title: 'Pears',
checked: false
}
];
$scope.pStatus = [
{
stat: 'Unselected',
color: 'black'
},
{
stat: 'Yes',
color: 'green',
},
{
stat: 'No',
color: 'red'
}
];
}]);
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="stuff in pList | orderBy: ['checked', 'selectedpStatus', 'id']:false">
<div ng-hide="stuff.checked">
<h2 class="title">{{ stuff.title }}</h2>
<br /><br /><br />
<div class="status" ng-style="{'color':stuff.pStatus.color}">
<select ng-model="stuff.selectedpStatus" ng-options="item.stat for item in pStatus"></select>
</div>
<p class="normal">Hide <label><input type="checkbox" ng-model="stuff.checked" id="{{ stuff.id }}" /></label></p>
</div>
</div>
<br /><br />
<div class="main">
Field One: :{{ stuff.title }}:
<br />
Field Two: :{{ stuff.title }}
</div>
</div>
Thank you for any help!
There are several questions/clarifications I'd typically want to ask, but here's an answer that should guide you further:
Have a property on the scope that stores whether the filter should be applied or not.
You can then filter the array using a filter in the controller, or defined globally. Or, just hide the elements you don't want shown using an ng-if directive on each element.
The logic for showing the title in field 1 vs 2 is simple; the issue is whether you do this for all items, or if you want to somehow select one to show outside of the repeat.
Here's a basic solution though:
<button type="button" ng-click="toggle()">Hide/Show Unselected</button><br>
Hide all: {{ hideAll }}<br />
<div class="card" ng-repeat="stuff in pList | orderBy: ['checked', 'selectedpStatus', 'id']:false"
ng-if="!hideAll || !stuff.selectedpStatus || stuff.selectedpStatus.stat !== 'Unselected'">
<div ng-hide="stuff.checked">
<h2 class="title">{{ stuff.title }}</h2>
<div class="status" ng-style="{'color':stuff.pStatus.color}">
<select ng-model="stuff.selectedpStatus" ng-options="item.stat for item in pStatus"></select>
</div>
stuff.selectedpStatus: {{ stuff.selectedpStatus }}<br>
Field One: {{ stuff.selectedpStatus && stuff.selectedpStatus.stat === 'Yes' ? stuff.title : '' }}<br />
Field Two: {{ stuff.selectedpStatus && stuff.selectedpStatus.stat === 'No' ? stuff.title : '' }}<br />
</div>
</div>
and
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.selected = false;
$scope.hideAll = false;
$scope.pList = [{
id: '1',
title: 'Apples',
checked: false
}, {
id: '2',
title: 'Oranges',
checked: false
}, {
id: '3',
title: 'Bananas',
checked: false
}, {
id: '3',
title: 'Pears',
checked: false
}];
$scope.pStatus = [{
stat: 'Unselected',
color: 'black'
}, {
stat: 'Yes',
color: 'green',
}, {
stat: 'No',
color: 'red'
}];
$scope.toggle = function() {
$scope.hideAll = !$scope.hideAll;
}
});
In a plunkr: https://plnkr.co/edit/PBr753nznrMwsgAIsTwE?p=preview
I'm trying to do something, i think, that should be relatively simple with EXT.js 4, but I can not find an answer. I'm trying to create a checkbox with a type of "checkbox" currently when I try it renders it as a type="button"
here is a sample of what I'm doing (I belive this code comes from Sencha itself, but it is what I am trying to do)
THIS CODE
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width : 300,
title : 'Pizza Order',
items: [{
xtype : 'fieldcontainer',
fieldLabel : 'Toppings',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3'
id : 'checkbox3'
}]
}],
bbar: [{
text: 'Select Bacon',
handler: function() {
var checkbox = Ext.getCmp('checkbox3');
checkbox.setValue(true);
}
},
'-',
{
text: 'Select All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(true);
checkbox2.setValue(true);
checkbox3.setValue(true);
}
},{
text: 'Deselect All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(false);
checkbox2.setValue(false);
checkbox3.setValue(false);
}
}],
renderTo: Ext.getBody()
});
RENDERS
<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">
Notice the type="button"? I nee the type to be a "checkbox"
Let me include the reason, maybe I am approaching this wrong. I am trying to make JAWS reader read the checkbox the way it should. As a type "button" JAWS reader reads it like a button and dose not read the label that goes with the check box.
Hope this makes since, please ask any question you need to and thanks for any help.
Ross
You can do this using config autoEl. Check this fiddle: http://jsfiddle.net/vdazU/3262/
{
xtype: 'component',
autoEl: {
html: '<input type="checkbox" id="checkbox1" name="topping" >Anchovies'
}
If you inspect the DOM, you will be able to see a html input checkbox.
I had the same problem, so almost 2 years later, here's your answer:
You need to include the css! It took me hours to figure this out.
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
BTW, put a comma after the 3.
inputValue: '3',
I had run your code at my end and its working fine. I am using extjs 6.0.2 and I think what you are seeing is that box that needs to be checked prefix to the label. It always remains as a button only. Even if you use a radiofield, then also it will be type="button" in dom because that box has to handle click event which can be handled by type="button". Can you provide the reason why you need it as type="checkbox"?
I'm creating radio buttons with ng-repeat and would like the selected button's name value to appear below.
Here is my view:
<span ng-repeat="weight in weights">
<input type="radio" name="weight" value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
<label for="weight{{weight.name}}">{{weight.name}}</label>
</span>
<p>Weight: {{weight.name}}</p>
Here is my controller:
$scope.weights = [
{
name: 1,
checked: true
},
{
name: 2,
checked: false
},
{
name: 3,
checked: false
}
];
Here is my Plunker.
How can I get the weight to appear in the paragraph tag?
You should maintain value of radio in one of the ng-model & use $parent. to define it in controller scope rather than in ng-repeat like here
Markup
<body ng-controller="MainCtrl" ng-init="radioValue=1">
<span ng-repeat="weight in weights">
<input type="radio" name="weight" ng-model="$parent.radioValue" ng-value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
<label for="weight{{weight.name}}">{{weight.name}}</label>
</span>
<p>Weight: {{radioValue}}</p>
</body>
Working Plunkr
The answer lies in understanding how $scope works in angular.
The quick solution is to use $parent.selectedName, where $parent refers to the parent scope. This is because each iteration of ng-repeat creates a scope of itself. (see enter link description here
See this https://jsfiddle.net/pankaj01/Xsk5X/3074/
the JS is
function MyCtrl($scope) {
$scope.weights = [
{
name: 1,
checked: true
},
{
name: 2,
checked: false
},
{
name: 3,
checked: false
}
];
}
Below is a simple example how I intend to use check boxes. What I have is an array of terms with id and name field and each post can be assigned to a single or multiple terms/categories.
var config = {};
config.terms = [
{id: 1, termName: 'Red'},
{id: 2, termName: 'Green'},
{id: 3, termName: 'Blue'}
];
Problem
With EmberJS handlebar expression I am showing those checkboxes but I am confused what to use as form element variable name field doesn't seem to defined in the controller. The checked field works as controller property but when I add termName as checked all of the checkboxes are checked by default and label after checking changes after clicking checkboxes.
What I need to get on the controller is the term names that are selected
Below is the example code. You can also find it on JsFiddle. Check uncheck the red/green/blue checkboxes to see the problem. Also have a look in console.
HTML
<div id="main"></div>
<script type="text/x-handlebars" data-template-name="index">
{{#each term in terms}}
{{input type="checkbox" name=term.name}} {{term.name}}
{{/each}}
<button {{action "submit"}}>Submit</button>
</script>
JS
var config = {};
config.terms = [
{id: 1, name: 'Red'},
{id: 2, name: 'Green'},
{id: 3, name: 'Blue'}
];
App = Ember.Application.create({
rootElement: '#main'
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller){
controller.set('terms', config.terms);
}
});
App.IndexController = Ember.Controller.extend({
actions: {
submit: function(){
console.log(this.Red);
console.log(this.Blue);
console.log(this.Green);
}
}
});
In you jsfiddle example you'r binding the name to the checked value of the checkbox. I think that's not what you want to do.
The checked value should be bound to a boolean value.
So,
1st approach: either add a property to your term object (selected: false)
config.terms = [
{id: 1, name: 'Red', selected: false },
{id: 2, name: 'Green', selected: false },
{id: 3, name: 'Blue', selected: false }
];
(as Ember objects:)
config.terms = [
Em.Object.create({id: 1, name: 'Red', selected: false }),
Em.Object.create({id: 2, name: 'Green', selected: false }),
Em.Object.create({id: 3, name: 'Blue', selected: false })
];
and then bind the property in your template this way:
{{input type="checkbox" checked=term.selected}}
2nd approach: bind it to controller properties:
// inside your controller:
redSelected: false,
greenSelected: false,
blueSelected: false,
{{input type="checkbox" checked=controlller.redSelected}}
I am working with Cakephp 2.4, Select2 3.4 and Jquery 1.10.
In my app, I have a table with 3 columns - product code, product description and product price.
I have Select2 set up so that the user can select either via product code or via product description. What I want to achieve is:
if the users selects via product code, set the product description and price and if he selects via description, set product code and price.
My data gets returned as follows:
[{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"}, {"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"}, {"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}]
I am able to set the value of the second select2 box using plain jQuery:
$(".productCode").on('change', function (product){
$(".description").select2("data", {id: '1', text: 'Test'});
});
What do I have to use to set the .description select2 value to the "description" value returned?
You forget initialize the select elements. Do it like this:
<!DOCTYPE html>
<html>
<head>
<title>jquery select2 test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="select2/select2.css" rel="stylesheet"/>
<script src="select2/select2.js"></script>
</head>
<body>
<input type="hidden" class="productCode" />
<select class="description" >
</select>
<script type="text/javascript">
$(document).ready(function() {
var $productCode = $(".productCode"),
$description = $(".description"),
product = [{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},{"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},{"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}];
//should initilize two select first
$productCode.select2({
'placeholder' : 'input to search',
"width" : '200px',
"query": function(query){
var data = {results: product};
query.callback(data);
}
});
$description.select2({
'width' : '200px'
});
$productCode.on('change', function (product){
$description.select2("data", {id: '1', text: 'Test'});
});
});
</script>
</body>
</html>
If you use hidden inputs to back your Select2 controls, like this:
<input type="hidden" class="product" id="productCode" data-text="text" data-placeholder="code" />
<input type="hidden" class="product" id="description" data-text="description" data-placeholder="description" />
<input type="hidden" class="product" id="unitPrice" data-text="unitPrice" data-placeholder="unit price" />
And you have data like this:
var PRODUCTS = [
{ id: 1, text: '10001', description: 'Product 1', unitPrice: '1.25' },
{ id: 2, text: '10002', description: 'Product 2', unitPrice: '5.00' },
{ id: 3, text: '10003', description: 'Product 3', unitPrice: '2.74' }
];
You can populate your Select2 controls using the "data" option, like this:
$('.product').each(function() {
var $this = $(this);
$this.select2({
allowClear: true,
data: { results: PRODUCTS, text: $this.attr('data-text') }
});
});
And you can use the Select2 "val" function to get and set the values, like this:
$('.product').change(function() {
var selecteId = $(this).select2('val');
$('.product').select2('val', selecteId);
});
jsfiddle demo