Please help me to find all selected radio button id for below code.
Here's an idea of what my HTML looks like
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
<tr>
<th> Name </th>
</tr>
<tr ng-repeat="item in ContactsList | findobj: dep.groupid">
<td>{{item.name}}</td>
<td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="UniqueId" selected="true" /></td>
</tr>
</table>
</div>
<div>
<button ng-click="Select()">Select</button>
</div>
</div>
</div>
And here's my Controller
var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function ($scope) {
$scope.DepList = [
{ dep: "computer", groupid: "1" },
{ dep: "english", groupid: "2" }
];
$scope.ContactsList = [
{
name: "Sijith",
id: "1",
groupid: "1"
},
{
name: "Deepak",
id: "1",
groupid: "2"
},
{
name: "Libi das",
id: "1",
groupid: "2"
},
{
name: "Noufal",
id: "1",
groupid: "1"
},
{
name: "Jijo",
id: "1",
groupid: "2"
}];
$scope.Select = function () {
alert($scope.UniqueId);
};
});
myapp1.filter('findobj', function () {
return function (ContactsList, id) {
return ContactsList.filter(function (l) {
if (l.groupid == id) {
return true;
}
});
};
});
There are few issue with the $scope.ContactsList binding with the radio button, you are binding the id of each element as the value of radio button , which should not be same if different radio button inside a group have different values.
I have done few changes in it to give each radio button a different value. I have also created a selectedContact list in which i will populated the selected radio buttons value with the group id the belong to.
var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function($scope) {
$scope.DepList = [{
dep: "computer",
groupid: "1"
}, {
dep: "english",
groupid: "2"
}];
$scope.ContactsList = [{
name: "Sijith",
id: "1",
groupid: "1"
}, {
name: "Deepak",
id: "1",
groupid: "2"
}, {
name: "Libi das",
id: "2",
groupid: "2"
}, {
name: "Noufal",
id: "2",
groupid: "1"
}, {
name: "Jijo",
id: "3",
groupid: "2"
}];
$scope.selectedContact = [];
$scope.Select = function() {
alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid1);
alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid2);
};
});
myapp1.filter('findobj', function() {
return function(ContactsList, id) {
return ContactsList.filter(function(l) {
if (l.groupid == id) {
return true;
}
});
};
});
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
<tr>
<th> Name </th>
</tr>
<tr ng-repeat="item in ContactsList | findobj: dep.groupid">
<td>{{item.name}}</td>
<td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="selectedContact['groupid'+dep.groupid]" selected="true" /></td>
</tr>
</table>
</div>
<div>
<button ng-click="Select()">Select</button>
</div>
</div>
</div>
Related
My task is to display a table using ng-repeat, say for eg: 1234567 with a button on each row. On click of the button, I want to display an alert with the corresponding number.
The following is my HTML file.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="myApp.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in records">
<td>{{x.Digit}}</td>
<td><input type="button" value="Press Me" ng-click="test(record)" /></td>
</tr>
</table>
</body>
</html>
<html>
<body>
JS file.
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
// $scope.records = [1,2,3,4,5,6,7];
$scope.records = [
{
"Digit" : "1",
},
{
"Digit" : "2",
},
{
"Digit" : "3",
},
{
"Digit" : "4",
},
{
"Digit" : "5",
},
{
"Digit" : "6",
},
{
"Digit" : "7",
}
]
$scope.test = function(text) {
alert("You clicked");
// alert(text);
}
// }).directive('li',function(){
// return {
// template: '<records> <record ng-click="test(record)" ng-repeat="record in records"> {{ record }} </record></br></records> '
// }
// });
// app.controller("myCtrl", function($scope) {
// $scope.myFunction = function(text){
// alert(text);
// };
});
Since your iterator is x, So pass x.digit, not record.
<tr ng-repeat="x in records">
<td>{{x.Digit}}</td>
<td><input type="button" value="Press Me" ng-click="test(x.Digit)" /></td>
</tr>
you need to pass x not record
<tr ng-repeat="x in records">
<td>{{x.Digit}}</td>
<td><input type="button" value="Press Me" ng-click="test(x.Digit)" /></td>
</tr>
DEMO
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
// $scope.records = [1,2,3,4,5,6,7];
$scope.records = [
{
"Digit" : "1",
},
{
"Digit" : "2",
},
{
"Digit" : "3",
},
{
"Digit" : "4",
},
{
"Digit" : "5",
},
{
"Digit" : "6",
},
{
"Digit" : "7",
}
]
$scope.test = function(text) {
alert("You clicked "+ text);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in records">
<td>{{x.Digit}}</td>
<td><input type="button" value="Press Me" ng-click="test(x.Digit)" /></td>
</tr>
</table>
</body>
</html>
<html>
<body>
I'm trying to join/combine two arrays in angular ng-repeat.
Simple example book/author where I want to print book titles with coresponding author name.
Books are in one array, authors in another.
How to join data in this example?
JSFiddle: http://jsfiddle.net/1jxsh0x3/
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.authors = [{
id: "1",
name: "John"
}, {
id: "2",
name: "Peter"
}, {
id: "3",
name: "Mark"
}];
$scope.books = [{
id: "1",
id_author: "3",
name: "Book Lorem"
}, {
id: "2",
id_author: "1",
name: "Book Ipsum"
}, {
id: "3",
id_author: "1",
name: "Book Dark"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{authors[$index].name}}</div>
<hr>
</div>
</div>
EDIT: At least AngularJS 1.2 is required
I would use angulars filter:
<div>
Authors name: {{authors[$index].name}}
</div>
to:
<div>
Authors name: {{(authors | filter:{'id': book.id_author}:true)[0].name}}
</div>
What we are doing here is taking the array authors and filter it by the expression 'id': book.id_author and we take the .name of the first element of this filtering ([0]).
Just in case you could check if you actually have the author in your array:
<div>
Authors name: {{(authors | filter:{'id': book.id_author}:true)
? (authors | filter:{'id': book.id_author}:true)[0].name
: 'Unknown'}}
</div>
Best regards
PS (EDIT): fiddle with angular 1.2.6 -> http://jsfiddle.net/gqqv9k38/1/
This is the most optimized solution for your problem.
Put the below code in your controller file -
$scope.entries = [];
angular.forEach($scope.books,function(entry) {
var author_name;
var searchField = "id";
var searchVal = entry.id_author;
author_name = getAuthorName(searchField,searchVal,$scope.authors)
$scope.SubInformation['author_name'] = author_name;
$scope.entries.push(angular.extend(entry,$scope.SubInformation);
});
function getAuthorName(searchField,searchVal,authors){
for (var i=0 ; i < authors.length ; i++)
{
if (authors[i][searchField] == searchVal) {
return authors[i]['name'];
}
}
}
And update your view file with below code :
<div ng-controller="MyCtrl">
<div ng-repeat="book in entries">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{book.author_name}}</div>
<hr>
</div>
</div>
You can create custom findAuthor method
Use common filter with strict to select exactly needed author id instead of similar
angular.module('app',[])
.controller('ctrl', function($scope){
$scope.authors = [{
id: "1",
name: "John"
}, {
id: "11",
name: "Peter"
}, {
id: "3",
name: "Mark"
}];
$scope.books = [{
id: "1",
id_author: "3",
name: "Book Lorem"
}, {
id: "2",
id_author: "1",
name: "Book Ipsum"
}, {
id: "3",
id_author: "1",
name: "Book Dark"
}];
$scope.findAuthor = function(id){
return $scope.authors.find(function(x){
return x.id == id
})};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h4>1. findAuthor metod</h4>
<div ng-app='app', ng-controller='ctrl'>
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{findAuthor(book.id_author).name}}</div>
<hr>
</div>
<h4>2. With help of filter</h4>
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{(authors | filter: {'id': book.id_author}: strict)[0].name}}</div>
<hr>
</div>
</div>
You can do like this:
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{getAuthorName(book.id_author)}}</div>
</div>
in js:
$scope.getAuthorName(id) {
var name;
name = $scope.authors.find(function(author) {
if(author.id_author === id) {
return author.name;
}
})
return name;
}
Hope this helps :)
create the function and filter the name according to id
$scope.getName = function(obj){
return $scope.authors.find(o=>{
if(o.id == obj.id_author){return o }
})
}
call it like this
<div ng-controller="MyCtrl">
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{getName(book).name}}</div>
<hr>
</div>
</div>
Demo
You can simply compare the values and add it to the books model. It can be done as shown below:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.authors = [{
id: "1",
name: "John"
}, {
id: "2",
name: "Peter"
}, {
id: "3",
name: "Mark"
}];
$scope.books = [{
id: "1",
id_author: "3",
name: "Book Lorem"
}, {
id: "2",
id_author: "1",
name: "Book Ipsum"
}, {
id: "3",
id_author: "1",
name: "Book Dark"
}];
for(var i = 0; i < $scope.books.length; i++){
var id = $scope.books[i].id_author;
for(var j = 0; j < $scope.authors.length; j++){
if($scope.authors[j].id == $scope.books[i].id_author ){
$scope.books[i].authorName = $scope.authors[j].name;
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app = "myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{book.authorName}}</div>
<hr>
</div>
</div>
</html>
You can merge both JSON data into new array
var newArray= authors.map(x => Object.assign(x, books.find(y => y.id == x.id)));
Here is your answer, with demo :) ..your author array must be sorted in my case ;)
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.authors = [{
id: "1",
name: "John"
}, {
id: "2",
name: "Peter"
}, {
id: "3",
name: "Mark"
}];
$scope.books = [{
id: "1",
id_author: "3",
name: "Book Lorem"
}, {
id: "2",
id_author: "1",
name: "Book Ipsum"
}, {
id: "3",
id_author: "1",
name: "Book Dark"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="book in books">
<div>Book title: {{book.name}}</div>
<div>Authors name: {{authors[book.id_author -1].name}}</div>
<hr>
</div>
</div>
</html>
The following list want to bind in a drop down with condition type="0"
$scope.ListPrintDestination = [{ id: "0", Name: "Printer",Type:"0" }, { id: "1", Name: "Windows" ,Type:"0"}, { id: "2", Name: "No Print" ,Type:"1"}];
then how will modify below code
<select ng-model="num" ng-options="lst as lst.AcNo for lst in lstPrint track by lst.AcNo">
<option selected="selected">select</option>
</select>
You can use filter for Type='0', and in html iterate on ListPrintDestination.
Demo:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.ListPrintDestination = [{
id: "0",
Name: "Printer",
Type: "0"
}, {
id: "1",
Name: "Windows",
Type: "0"
}, {
id: "2",
Name: "No Print",
Type: "1"
}];
});
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="num" ng-options="lst as lst.Name for lst in ListPrintDestination | filter : {Type : '0'} ">
<option selected="selected">select</option>
</select>
</div>
I want to obtain a "row" from a model querying by key. ¿How can I achieve that?
I´m looking for something like
{{ mysettings.backcolor | searchby(datuak.ref) }} or something like this.
The fact is that I have a model with data, and other model with bacground and forecolor info. The relation between them is the "ref" column.
When printing the table, on the ng-repeat, I want to to obtain the foreground/backcolor querying it by id.
Any help or clue?
I have this two models in my controller:
$scope.mysettings = [
{ ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
{ ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
];
And this is the other model:
$scope.datuak = [
{
linea: '1',
egunak:[{
fetxa: '2014/05/19',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'112233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/20'},
{fetxa: '2014/05/21',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF232233'},
{ of:'OF289977'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/22'},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
},
{
linea: '2',
egunak:[
{ fetxa: '2014/05/19'},
{
fetxa: '2014/05/20',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF2233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/21'},
{
fetxa: '2014/05/22',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF232233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
}
];
With this two model, I have my view like this:
<tbody>
<tr ng-repeat="lineas in datuak">
<td class="tdlinea">Linea:{{ lineas.linea }}</td>
<td data-ng-repeat="nireindex in [0,1,2,3,4,5,6]">
<table class="table text-center table-condensed">
<thead>
<th>Mañana</th>
<th>Tarde</th>
<th>Noche</th>
</thead>
<tbody>
<tr>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[0].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)">
<td>{{ orden.ref }} {{ orden.of }} </td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[1].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[2].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr> <!-- lineas -->
</tbody>
You may look at angular js filter filter : https://docs.angularjs.org/api/ng/filter/filter
if you need to go further you can create your own that use array.filter() method:
app.filter('searchBy', function() {
return function( array, prop , val ) {
// filter has polyfills for older browsers. Check underscore.js if needed
return array.filter( function(row) {
return row[prop] == val;
} );
// this returns an array. You can pick the first element with [0]
}
} );
then use it in your loop like this:
{{ mySetting | searchBy : 'ref' : linea.ref }}
The easy way to achieve this is to refactor your model to behave like an associative array instead of a common. It should end up like this:
$scope.mysettings = {
3CI00001: { ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
3CI00002: { ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
};
That way you could access objects by it's id simply by doing mysettings[id].backcolor
Cheers!
What you can do is loop through your settings, then loop through each settings object and return the matched item:
function findSetting(s) {
//loop through all settings-->
for (var i = 0; i < mySettings.length; i++) {
//if setting is an object loop through keys in object-->
if (typeof (mySettings[i]) === 'object') {
for (var key in mySettings[i]) {
if (mySettings[i][key] === s) {
//return match-->
return mySettings[i];
}
}
}
}
}
Here is a fiddle
I want to bring the last column 'Description' to the next line
Here is fiddle http://jsfiddle.net/pratbhoir/fNhKp/12/
It must be look like
I need table, the description td must be in the same tr.
Item name SalesCount Price
Speedy Coyote 89 $190.00
This is a Description
Furious Lizard 152 $25.00
This is a Description
Thankyou in advance for the help
You should have something like this: (I have updated your jsfiddle)
Alternatively, you can use div's in your template instead table, but I'm not sure cause I don't know ko.simpleGrid so deeply ...
HTML
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel, simpleGridTemplate:"custom_grid_template"'> </div>
</div>
<script type="text/javascript" id="custom_grid_template">
<table class="ko-grid" cellspacing="0">
<thead>
<tr data-bind="foreach: columns">
<th data-bind="text: headerText"></th>
</tr>
</thead>
<tbody data-bind="foreach: itemsOnCurrentPage">
<tr data-bind="foreach: $parent.columns">
<!--ko ifnot: typeof rowText == 'object' && typeof rowText.action == 'function'-->
<td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
<!--/ko-->
</tr>
<!-- Your "desc" should be rendered as a row -->
<tr>
<td colspan="3" data-bind="text: desc">Test</td>
</tr>
</tbody>
</table>
</script>
JavaScript
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95, desc:"This is a description" },
{ name: "Speedy Coyote", sales: 89, price: 190.00 , desc:"This is a description" },
{ name: "Furious Lizard", sales: 152, price: 25.00 , desc:"This is a description" },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 , desc:"This is a description" },
{ name: "Brooding Dragon", sales: 0, price: 6350 , desc:"This is a description" },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 , desc:"This is a description" },
{ name: "Optimistic Snail", sales: 420, price: 1.50 , desc:"This is a description" }
];
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
//Your "desc" is not a column
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));