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
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>
Sorry for my language skills, hope you understand all.
I need to make inputs for ng-repeat elements, to pass input data to http post.
For example: i have 4 elements, for all elements i make inputs, and f.e:
elem1- input: 1
elem2- input: 4
elem3- input: 1
elem4- input: 2
Here is my code:
.panel-body.note-link ng-repeat=("meal in mealsList track by $index")
a data-toggle="tab"
h4.pull-right.text-muted
| {{meal.price}} zł
h4.text-success
i.fa.fa-close.text-danger<> ng-click="removeMeal($index)" style="cursor: pointer;font-size: 15px;"
| {{meal.name}} {{$index}}
input.form-control type="number" ng-model="example"
| {{example}}
And i dont know, how to pass input data to controller.
Any tips,tricks?
angular.module('yourModule').controller('viewController', function($scope) {
$scope.mealList = [...];
$scope.example; //The input data will automatically bind to this variable.
});
If you want the input to change data within your meal object, then do this:
input.form-control type="number" ng-model="meal.example"
And then the property value of the meal object would bind to the input
Repeat through your mealList array and add the inputs.
Example: https://jsfiddle.net/ptzhL0uL/
Controller
function Controller1($scope) {
var vm = this;
vm.items_saved = false;
vm.mealList = [{
price: '2.99',
name: 'Pizza'
}, {
price: '1.99',
name: 'Chips'
}, {
price: '4.99',
name: 'Beer'
}];
vm.addNewItem = addNewItem;
vm.saveItems = saveItems;
function addNewItem() {
vm.mealList.push({});
}
function saveItems() {
vm.items_saved = true;
}
}
HTML
<button ng-click="ctrl.addNewItem()" class="btn btn-default">Add Item</button>
<div ng-repeat="item in ctrl.mealList">
<input type="text" ng-model="item.name">
<input type="text" ng-model="item.price">
<input type="number" ng-model="item.quantity">
</div>
<button ng-click="ctrl.saveItems()" class="btn btn-primary">Save</button>
<hr>
<div ng-if="ctrl.items_saved">
<h4>Here is your meal list:</h4>
<ul>
<li ng-repeat="item in ctrl.mealList">{{item.quantity}}{{item.name}} at ${{item.price}} each</li>
</ul>
</div>
Just attach it to the ngModel directive.
<div ng-repeat="item in array">
{{ item.output }}
<input ng-model="item.output" />
</div>
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>
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';
}]);
I How i can filter post by date my code is:
My View is:
<div>
<h4>filter by date</h4>
<input type="date" name="filterByDate" ng-model="filterByDate.date"/>
</div>
<div>
<ul>
<li ng-repeat="item in items | filter:filterByDate ">
<p>Title: {{item.title}}</p>
<p>Date: {{item.date.toDateString()}}</p>
</li>
</ul>
</div>
Controller:
app.controller('ItemController', function($scope){
var items= [
{
title: "item1",
date: new Date(2015,1,15)
},
{
title: "item2",
date: new Date(2015,2,16)
}
];
$scope.items= items;
});
I try filter only post for current date who is select from input, but result is not filtered.
Tell me, where wrong.