Consider the following:
self.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: '4', selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]);
self.amountSelected = ko.observableArray();
If I do:
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="radio" name="radio-selection-name" data-bind="attr: {value: key}, checked: $root.amountSelected()[$index()] || selected" />
</div>
</div>
This works, what doesn't work is notice how one of the amounts it's selected as it has a '1'
How do I say, select the currently selected item or use the selected item for this object?
Is there a way to set, for that index, the radio to selected if the selected attribute on the object is a '1'?
You cannot select more then one radio, so the checked binding dont need to be an observableArray for radios. The best way to set the value of the input is the checkedValue binding, in the snippet there are an example of both, but plese see the documentation Checked binding KO it is very useful.
function ViewModel(){
this.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: 4, selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]);
this.amountSelectedRadio = ko.observable(2);
this.amountSelectedChecked = ko.observableArray([8,4]);
}
ko.applyBindings(new ViewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Checked Binding: Radio</h2>
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="radio" name="radio-selection-name" data-bind="checked: $root.amountSelectedRadio, checkedValue: key" />
</div>
</div>
<h2>Checked Binding: CheckBox</h2>
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="checkbox" name="checkbox-selection-name" data-bind="checked: $root.amountSelectedChecked, checkedValue: key" />
</div>
</div>
Related
Why is my select box option not getting selected on load?
As you can see from the script below there is already a class_id there in the "ng-model" of the select box still it doesn't gets that value selected in the option with the class_id present in the option.
Upon select box change the "ng-model" gets updated and the model also gets updated with the class_id of the option.
Need to set select box option to the pre selected class_id of the option.
Fiddle for the same is here
angular
.module("app", [])
.controller("test", function($scope) {
$scope.cartData = {
order: [{
class_id: 1,
price: 121
}, {
class_id: 2,
price: 11
}],
selectedSection: {
classes: [{
class_id: 1,
name: "adsad"
}, {
class_id: 2,
name: "2222"
}]
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<ul class="bxslider" ng-controller="test">{{test}}
<li class="mbm" ng-repeat="seat in cartData.order">
<div class="box">
<div class="select-style">
Selected id: {{seat.class_id}}
<select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes track by type.class_id" ng-model="seat.class_id">
<!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
</select>
</div>
<div class="price-sec">
<span class="price">Price: {{seat.price}}</span>
</div>
</div>
</li>
</ul>
</div>
Remove the track by type.class_id from ng-options.As the angular doc says
Using select as will bind the result of the select expression to the
model, but the value of the and html elements will
be either the index (for array data sources) or property name (for
object data sources) of the value within the collection. If a track by
expression is used, the result of that expression will be set as the
value of the option and select elements.
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];
but this will not work:
<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;
In both examples, the track by expression is applied successfully to
each item in the items array. Because the selected option has been set
programmatically in the controller, the track by expression is also
applied to the ngModel value. In the first example, the ngModel value
is items[0] and the track by expression evaluates to items[0].id with
no issue. In the second example, the ngModel value is items[0].subItem
and the track by expression evaluates to items[0].subItem.id (which is
undefined). As a result, the model value is not matched against any
and the appears as having no selected value.
angular
.module("app", [])
.controller("test", function($scope) {
$scope.cartData = {
order: [{
class_id: 1,
price: 121
}, {
class_id: 2,
price: 11
}],
selectedSection: {
classes: [{
class_id: 1,
name: "adsad"
}, {
class_id: 2,
name: "2222"
}]
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<ul class="bxslider" ng-controller="test">{{test}}
<li class="mbm" ng-repeat="seat in cartData.order">
<div class="box">
<div class="select-style">
Selected id: {{seat.class_id}}
<select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes " ng-model="seat.class_id">
<!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
</select>
</div>
<div class="price-sec">
<span class="price">Price: {{seat.price}}</span>
</div>
</div>
</li>
</ul>
</div>
How can we make the text clickable. Below is a list which is referred to a knockout template. I can directly check the box, but cannot able to make the text clickable so that it can reflect the checkbox.
HTML:
<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul>
<script id="choiceTmpl" type="text/html">
<li>
<input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
<label data-bind="text: $data"></label>
</li>
</script>
JS:
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(["two", "four"])
};
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() {
return this.selectedChoices().join(",");
}, viewModel);
ko.applyBindings(viewModel);
Jsfiddle Demo: here
Is there any way, that we can make it clickable?
Put a <label> around the <input> element:
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(["two", "four"])
};
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() {
return this.selectedChoices().join(",");
}, viewModel);
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: choices">
<li>
<label>
<input data-bind="attr: {
value: $data
},
checked: $parent.selectedChoices" type="checkbox" />
<span data-bind="text: $data"></span>
</label>
</li>
</ul>
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>
In your fiddle: http://jsfiddle.net/x0f1pk6q/
Alternatively, you could construct an id attribute in the loop. You'll have to make absolutely sure it's unique though. I'd advice you to use some sort of utility that increments an index in a closure that is guaranteed to be unique per session.
You need to link the id and for attributes using the same method:
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(["two", "four"]),
getCbId: function(val, i) {
// This combination of value and index aims to create a
// "kind-of-unique" id. See answer for more info.
return "CB_" + val + "_" + i;
}
};
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() {
return this.selectedChoices().join(",");
}, viewModel);
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: choices">
<li>
<input data-bind="attr: {
value: $data,
id: $root.getCbId($data, $index())
},
checked: $root.selectedChoices" type="checkbox" />
<label data-bind="text: $data,
attr: {
for: $root.getCbId($data, $index())
}"></label>
</li>
</ul>
<pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>
exampleDEMO
You can see code above link.
Actually, I want to according the button group's input to control all of input form which name is the same with button group name.
For example, I put value into input form on the 'First' Button right side,
and the same time, all of the input form which name 'First' should be change
with just button group input one.
Sorry for my poor English skill, hope you can understand it!!
<div ng-app="app" ng-controller="AppCtrl">
// list group
<div>
<ul>
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" ng-model="price">
</li>
</ul>
</div>
// button group
<div>
<ul class="list-btn">
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" ng-model="price_all">
</li>
</ul>
</div>
</div>
angular.module('app', [])
.controller('AppCtrl', ['$scope', function ($scope) {
$scope.items = [
{id: 1, name: 'First'},
{id: 2, name: 'Second'},
{id: 3, name: 'Third'},
{id: 4, name: 'First'},
{id: 5, name: 'Second'},
{id: 6, name: 'Third'},
{id: 7, name: 'First'},
{id: 8, name: 'Second'},
{id: 9, name: 'Third'},
]
$scope.btns = ['First', 'Second', 'Third'];
}])
Since ng-model is repeated insisde li tag, the two-way binding will work only inside that li tag, not outside of it. So, you need to use onkeyup event.
Working solution in the fiddlder - https://jsfiddle.net/fcoLmd2n/
Do these changes in html:
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<input type="text" class="{{item.name}}" ng-model="price">
</li>
<li ng-repeat="btn in btns">
<button>{{btn}}</button>
<input type="text" btnType="{{btn}}" ng-model="price_all" onkeyup="Update(this);">
</li>
Changes in Js file:
function Update(obj)
{
var className = obj.getAttribute('btnType');
var txtBoxElements = document.getElementsByClassName(className);
for(var i=0;i<txtBoxElements.length;i++)
{
txtBoxElements[i].value= obj.value
}
}
Use Jquery for optimization
On the code you can see as follows:
<div class="form-group form-group-sm" ng-repeat="sForm in sForms">
<label class="col-sm-3 control-label">{{sForm.label}}</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="{{sForm.place}}" name="{{sForm.name}}" ng-model="search[sForm.propertyName]" ng-click="searchDisabled(sForm.val)" ng-disabled="{{sForm.disabled}}" />
</div>
<div class="col-sm-1">
<input type="radio" class="radio" name="checked" ng-click="searchDisabled(sForm.val)" ng-model="formRadio.checked" value="{{sForm.val}}" ng-hide="{{!sForm.disabled}}" />
</div>
</div>
doesn't work the ngModel value search[sForm.propertyName]. I don't know why.. Here are the properties:
$scope.sForms = [
{
label: 'Lastname',
place: 'Searching lastname',
name: 'Lname',
val: 1,
propertyName: 'lname',
disabled: $scope.disabledLname,
hideRadio: !$scope.disabledLname
},
{
label: 'Firstname',
place: 'Searching firstname',
name: 'Fname',
val: 2,
propertyName: 'fname',
disabled: $scope.disabledFname,
hideRadio: !$scope.disabledFname
}];
The disabled value also didn't work. when I check the first input then the second input need to be disabled.
I want to make a input phone with AngularJS as you can see on this picture.
I tried :
I tried using ng-option, but I can't insert image to dropdown list.
I tried this solution but this didn't work neither.
How can I insert image to ng-option? I'm new to AngularJS.
<div ng-app="myApp" ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption">A</select>
<input type="text" name="number" value="{{data.selectedOption.macode}}">
</form>
This is js file
var myApp=angular.module('myApp', [])
myApp.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'VIET NAM', macode:'+84'},
{id: '2', name: 'AMERICAN',macode:'+85'},
{id: '3', name: 'CANADA',macode:'+86'}
],
selectedOption: {id: '3', name: 'Option C',macode:'+86'} //This sets the default value of the select in the ui
};
code:'+84';
}]);