We Keep Coding

Issue with select box value not getting pre selected in angularjs

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>

Could you help resolve this logic issue?

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

Select the first radio button knockout js

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>

How can I get a value from a form and use it in a controller?

My code: http://pastebin.com/AyFjjLbW
I'm trying to learn AngularJS and in the beginning it was going well but now I am stuck. What I want to do is use the drop down menu to select a priority and a type of job that can be done but I can not figure out how on earth I can get a value from a input tag and use it in my script when I try to push a value from an array into my object.
You can see my failed attempt here:
priority: $scope.priority[other_options.worktype]
Thank you!

Here is the proper way of doing what you want :
<!DOCTYPE html>
<html lang="en-us" ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
<title>Alex's Todo List</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div ng-controller="placingItems">
<h1>To Do List</h1>
<center><button type="button" ng-click = "clear_all()">Clear List</button></center>
<p>What to do: <input type="text" ng-model="thing">
<form name="other_options">
<select ng-model="worktype" ng-options="worktype.label for worktype in worktypeList" ></select>
<select ng-model="priority" ng-options="priority.label for priority in priorityList" ></select>
<input type="submit" ng-click="add()">
</form>
</p>
<div class="block">
<p>To do:</p>
<center><li ng-repeat = "x in items">
<span ng-style="cmplt">{{ x.name }}</span> {{ x.type.label }} {{ x.priority.label }}
<button type="button" ng-click="cmplt={color: 'gray', 'text-decoration': 'line-through'}">Completed</button>
</li></center>
</div>
</div>
</body>
</html>
<script>
angular.module('todoApp.controllers', [])
.controller('placingItems', ['$scope', function($scope) {
$scope.thing = "Nothing";
$scope.items = [];
$scope.priorityList = [{
label:'Top Priority',
id: 1
}, {
label: 'Mid Priority',
id: 2
}, {
label: 'Low Priority',
id: 3
}];
$scope.worktypeList = [{
label:'Work',
id: 1
}, {
label: 'Personal',
id: 2
}];
$scope.add = function(){
$scope.items.push({
name: $scope.thing,
priority: $scope.priority,
type: $scope.worktype
});
};
$scope.clear_all = function(){
$scope.items = [];
};
}]);
var app = angular.module('todoApp', ['todoApp.controllers']);
</script>

Your form field should have ng-model associated with them so that you can access those value inside controller scope. Basically when your create a form with name attribute, at that time name attribute gets added to controller scope variable & then that scope variable will give you all the form related validation inside the object.
Markup
<form name="other_options" ng-init="formData={}">
<select name="worktype" ng-model="formData.worktype">
<option selected value="-" name = "work">Work</option>
<option value="1" name="home">Home</option>
</select>
<select name="priortype" ng-model="formData.worktype">
<option value="0" name="top">Top Priority</option>
<option selected value="1" name="mid">Mid Priority</option>
<option value="2" name="low">Low Priority</option>
</select>
<input type="submit" ng-click="add()">
</form>
Then only you can access this value inside controller using like $scope.formData.worktype
Code
$scope.add = function(){
$scope.items.push(
{name: $scope.thing,
priority: $scope.formData.worktype, //or $scope.formData["worktype"]
type: $scope.type[1]
});
};

Take a look at http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller it is very good. Hope this is what you need.

AngularJS storing data from ng-repeat models in object

I'm trying to get an object like this:
$scope.order = {
'client' : '24',
'products' : [
{'id': '23', 'format' : 'box', 'units': '3'},
{'id': '33', 'format' : 'can', 'units': '24'},
{'id': '11', 'format' : 'box', 'units': '4'}
]
}
having the next controller
(function(){
var app = angular.module('myApp',[]);
app.controller('Controller', function($scope){
//data from service
var items = [
{'id':1, 'name': 'redItem'},
{'id':2, 'name': 'blueItem'},
{'id':3, 'name': 'yellowItem'},
{'id':4, 'name': 'greenItem'},
];
$scope.products = items;
$scope.order = {
'client' : '12',
};
$scope.order.products = {};
$scope.show = function(productID){
console.log($scope.order.products);
console.log($scope.order);
};
});
})();
and view
<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>
</p>
</li>
I'm trying to update de object every time the checkbox is changed, adding the product id if checked and units of the input number but the structure I'm getting is wrong
$scope.order = {
"client":"12",
"products":{
"id":{"0":1,"1":2,"3":4},
"units":{"1":2,"3":1}
}
}
any clues??
EDIT:
I forgot the plunker... plunker

In your view:
<ul class="list">
<li ng-repeat="product in products | orderBy: 'name'">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show()" ng-model="order.products.id[$index]" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products.units[$index]" min="1" ng-show="order.products.id[$index]"/>
</p>
</li>
You are creating an array called id by using the model order.products.id[$index] and an array called units by using the model order.products.units[$index]. You are actually trying to access a product in the order.products[] array. Rather than jump through the hoop of creating a new object, I would mark the item as selected and track its units. You can then filter to just the selected products and do any desired transformation when the order is completed.
Controller:
(function(){
var app = angular.module('myApp',[]);
app.controller('Controller', function($scope, $filter){
//data from service
var items = [
{'id':1, 'name': 'redItem'},
{'id':2, 'name': 'blueItem'},
{'id':3, 'name': 'yellowItem'},
{'id':4, 'name': 'greenItem'},
];
$scope.products = items;
$scope.order = {
'client' : '12',
};
$scope.show = function(productID){
console.log($scope.order.products);
console.log($scope.order);
$scope.order.products = $filter('filter')($scope.products, { isSelected: true }, true);
};
});
})();
View:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Controller">
<ul class="list">
<li ng-repeat="product in products">
<p>
<a ng-bind='product.name'></a>
<input type="checkbox" ng-change="show(product.id)" ng-model="product.isSelected" />
<input type="number" ng-model="product.units" min="1" ng-show="product.isSelected" />
</p>
</li>
</ul>
<p>{{order}}</p>
</div>
</body>
</html>
Plunker: http://plnkr.co/edit/1DYsSYF6Fscxto6vykJU?p=preview

Modified the ng-model and ng-show to reflect array instead of object and similarly modified the js code
Plunker: http://plnkr.co/edit/TNBZgKNDTDhiLt3yOJkB?p=preview
<input type="checkbox" ng-change="show(product.id)" ng-model="order.products[$index].id" value="1" ng-true-value="{{product.id}}" ng-false-value="0">
<input type="number" ng-model="order.products[$index].units" min="1" ng-show="order.products[$index].id"/>
$scope.order.products = [];