I am trying to add checkboxes to every name, and then add a boolean to $scope.messages at the name : ex. I check checkbox at name eva - then $scope.messages looks like that :
$scope.messages =
{
"family": [
{
"name": "eva",
"checked" : true,
"childrens" : [..
Here is my code :
JS:
$scope.messages =
{
"family": [
{
"name": "eva",
"childrens": [
{
"name": "John",
"childrens": [
{
"name": "Jacob"
}
]
}
]
},
{
"name": "ben",
"childrens": [
{
"name": "Eva",
"childrens": [
{
"name": "Jack"
}
]
}
]
}
]
}
HTML :
<div ng-repeat="key in messages">
<ul ng-repeat=" (x, y) in key" style="list-style:none;">
<li><input type="checkbox" ng-model="shapes" ng-change="changeValue(shapes, y.name)"/> {{y.name}}</li>
<li style="margin-left:15px;" ng-repeat="(a,b) in y.childrens" ><input type="checkbox" ng-model="shapes" ng-change="changeValue(shapes, b.name)"/> {{b.name}}
<ul style="margin-left:15px;" ng-repeat="p in b.full_name" >
<li><input type="checkbox" ng-model="shapes" ng-change="changeValue(shapes, p.name)"/> {{p.name}}</li>
</ul>
</li>
</ul>
</div>
Also i would like to add boolean to children of checked name
ex.
$scope.messages =
{
"family": [
{
"name": "eva",
"checked" : true,
"childrens": [
{
"name": "John",
"checked" : true,
"childrens": [
{
"name": "Jacob",
"checked" : true,
}
Here is my plunker : http://plnkr.co/edit/CbOrL5l4o7a2f9OOjZ2w?p=preview
Thanks for answers in advance!!!
I am not sure I have understood the question or what exactly you need but I have played around with your code a bit and now I can see the 'checked' boolean value for each item in the family tree.
Checkout my code and see if this is the direction you were looking for.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.messages =
{
"family": [
{"name": "eva",
checked: false,
"childrens":
[
{"name": "John",
checked: false,
"childrens": [
{"name": "Jacob", checked: false}
]
}
]
},
{"name": "ben",
checked: false,
"childrens":
[
{"name": "Eva",
checked: false,
"childrens": [
{"name": "Jack", checked: false}
]
}
]
}
]
}
$scope.changeValue = function(item) {
console.log(item.name);
console.log(item.checked);
};
});
I have adjusted the HTML a bit as well:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="key in messages">
<ul ng-repeat="person in key" style="list-style:none;">
<li>
<input type="checkbox" ng-model="person.checked" ng-change="changeValue(person)"/> {{person.name}}
</li>
<li style="margin-left:15px;" ng-repeat="child in person.childrens" >
<input type="checkbox" ng-model="child.checked" ng-change="changeValue(child)"/> {{child.name}}
<ul style="margin-left:15px;" ng-repeat="grandChild in child.childrens" >
<li>
<input type="checkbox" ng-model="grandChild.checked" ng-change="changeValue(grandChild)"/> {{grandChild.name}}
</li>
</ul>
</li>
</ul>
</div>
</body>
If you open the console, you will see the name and the checkbox value for the item you have clicked. It is better to use object field with ng-model.
Related
i have following record i want filter in ng-repeat by name i enter but its but not working please help me this
ng-repeat="contact in vm.contacts | filter: {name: vm.chatSearch}
"userlist": [
{
"_id": "59edd7c5ff809c1c4c7a43c2",
"updatedDatetime": "2017-10-23T11:51:33.106Z",
"createdDatetime": "2017-10-23T11:51:33.106Z",
"user_id": {
"_id": "59f07d5c935f27764c8d1090",
"name": "james"
},
"__v": 0
}
]
Try:
ng-repeat="contact in vm.contacts | filter: {user_id: {name: vm.chatSearch}}"
Demo plunker
Example:
<ul>
<li ng-repeat="contact in contacts | filter: {user_id: {name: chatSearch}}">
{{contact.name}} user_id: {{contact.user_id.name}}
</li>
</ul>
My following example may helps you
HTML
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<input ng-model="results.year">
<div ng-repeat="subject in results.subjects | filter:{grade:'A'}">
<input ng-model="subject.title" />
</div>
</body>
</html>
JS
function MyCtrl($scope) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
}
Thanks,
Arun
You need something like this,
<li ng-repeat="user in vm.contacts | filter: {user_id: {name: searchterm}}"><span>{{user.user_id.name}}</span></li>
DEMO
var app = angular.module('myapp',[]);
app.controller('personController',function(){
var vm = this;
vm.contacts = [
{
"_id": "59edd7c5ff809c1c4c7a43c2",
"updatedDatetime": "2017-10-23T11:51:33.106Z",
"createdDatetime": "2017-10-23T11:51:33.106Z",
"user_id": {
"_id": "59f07d5c935f27764c8d1090",
"name": "james"
},
"__v": 0
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController as vm">
<input ng-model="searchterm"/>
<ul>
<li ng-repeat="user in vm.contacts | filter: {user_id: {name: searchterm}}"><span>{{user.user_id.name}}</span></li>
</ul>
</div>
I have displayed a list of items in my data set using the ng-repeat as below.
<li ng-repeat="item in adults[1].children">
{{item.childName}}
</li>
What I would like to do is HOW TO dynamically update the list using navigation such as this to show the other child items -
<li ng-click="updateList(1)">First kids</li>
<li ng-click="updateList(2)">Second group of kids</li>
<li ng-click="updateList(3)">Third group of kids</li>
dataset
$http.get('data/parents-data.json')
.then(function(res) {
$scope.adults= res.data;
});
[
{
"parentName": "Jim",
"age": "32",
"sex": "M",
"children": [
{"childName": "Jennifer"},
{"childName": "Timmy"}
]
},
{
"parentName": "Barbara",
"age": "29",
"sex": "F",
"children": [
{"childName": "Oliver"},
{"childName": "Henry"},
{"childName": "Jane"}
]
},
{
"parentName": "Sue",
"age": "40",
"sex": "F",
"children": [
{"childName": "William"},
{"childName": "Robyn"},
{"childName": "Sarah"}
]
}
]
I'm really stumped as to how to get the updateList function to return the index back to the the ng-repeat
I tried
$scope.updateList = function(val) {
return adults[x].children;
}
With
<li ng-repeat="item in updateList()>
{{item.childName}}
</li>
But this obviously didn't work. I just can't get this clear in my head. Maybe I'm doing this wrong. Any help at all greatly appreciated : )
You just have to create a new $scope variable and update it on ng-click to change the list of childrens.
//Default set of children
$scope.childrens=$scope.adults[0].children;
//Update childrens variable on click
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].children;
}
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"parentName": "Jim",
"age": "32",
"sex": "M",
"children": [
{"childName": "Jennifer"},
{"childName": "Timmy"}
]
},
{
"parentName": "Barbara",
"age": "29",
"sex": "F",
"children": [
{"childName": "Oliver"},
{"childName": "Henry"},
{"childName": "Jane"}
]
},
{
"parentName": "Sue",
"age": "40",
"sex": "F",
"children": [
{"childName": "William"},
{"childName": "Robyn"},
{"childName": "Sarah"}
]
}
];
$scope.childrens=$scope.adults[0].children;
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].children;
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<ul>
<li><a ng-click="updateList(0)">First kids</a>
</li>
<li ng-click="updateList(1)"><a ng-click="updateList(1)">Second group of kids</a>
</li>
<li ng-click="updateList(2)"><a ng-click="updateList(2)">Third group of kids</a>
</li>
</ul>
<ul>
<li ng-repeat="children in childrens">
{{children.childName}}
</li>
</ul>
</div>
</body>
</html>
You can create a new variable on your $scope to keep track of which children to display. Then we could create a function to update this group. See below
In your controller
$scope.children = $scope.adults[0]; // Default to the first group
$scope.updateGroup = function(newGroupNumber) {
$scope.children = $scope.adults[newGroupNumber];
};
Then in your template:
<li ng-repeat="child in children>
{{child.childName}}
</li>
...
<li ng-click="updateGroup(1)">First kids</li>
<li ng-click="updateGroup(2)">Second group of kids</li>
<li ng-click="updateGroup(3)">Third group of kids</li>
This is my JSON data:
[
{
"name": "elin",
"family": "kinoian"
},
{
"name": "simon",
"family": "santos"
},
{
"name": "sara",
"family": "pinki"
},
{
"name": "emin",
"family": "richard"
}
]
As you can see,I have 2 key in each row "name" and "family.
This is my ng-repeat filtering by json object "search":
<li ng-repeat="membr in familyMember| filter:search">
<span> {{membr.name}} - {{membr.family}}</span>
</li>
And these are my inputs for filtering:
By name: <input type="text" ng-model="search.name1">
and <input type="text" ng-model="search.name2">
By family: <input type="text" ng-model="search.family">
I need the rows which name is "elin" and "sara". I`m looking for "AND Condition" in filtering. How can I do that?
First of all, no, you're not looking for an AND condition, but for an OR. Indeed, a family member can't be named "elin" and "sara" at the same time.
Now, if you read the documentation for the filter filter, you'll see that it accepts a function as argument, which must return a truthy value if the value is accepted, and a truthy value if it's rejected. So all you need is
ng-repeat="member in familyMember| filter:isAccepted">
and
$scope.isAccepted = function(member) {
return member.name === $scope.search.name1 || member.name === $scope.search.name2;
}
You need to use a custom filter with OR condition.
$scope.nameFilter = function(member) {
var result = (member.name == $scope.membr.name1) ||
(member.name == $scope.membr.name2) ||
(member.family == $scope.membr.family);
return result;
};
DEMO
var myApp = angular.module('myApp', []);
myApp.controller("MyCtrl", ['$scope', function($scope) {
$scope.familyMember = [{
"name": "elin",
"family": "kinoian"
}, {
"name": "simon",
"family": "santos"
}, {
"name": "sara",
"family": "pinki"
}, {
"name": "emin",
"family": "richard"
}];
$scope.nameFilter = function(member) {
var result = (member.name == $scope.membr.name1) ||
(member.name == $scope.membr.name2) ||
(member.family == $scope.membr.family);
return result;
};
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
By name:
<input type="text" ng-model="membr.name1" > and
<input type="text" ng-model="membr.name2"> By family:
<input type="text" ng-model="membr.family">
<li ng-repeat="membr in familyMember| filter:nameFilter">
<span> {{membr.name}} - {{membr.family}}</span>
</li>
</div>
</body>
</html>
Try this working demo :
var app = angular.module('myApp',[]);
app.controller('mainCtrl', function($scope) {
$scope.familyMember = [
{
"name": "elin",
"family": "kinoian"
},
{
"name": "simon",
"family": "santos"
},
{
"name": "sara",
"family": "pinki"
},
{
"name": "emin",
"family": "richard"
}
];
$scope.search = function(membr) {
return membr.name === $scope.search.name1 || membr.name === $scope.search.name2;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mainCtrl'>
name1: <input type="text" ng-model="search.name1">
name2: <input type="text" ng-model="search.name2"><br><br>
<li ng-repeat="membr in familyMember | filter:search">
<span> {{membr.name}} - {{membr.family}}</span>
</li>
</div>
I would like to ask how will you show the "totals array" below the table Event AccountShop, Place and Activity? This code is working but I do have trouble inserting the "total" value in the Json" below the table.
table.html
<!DOCTYPE html>
<html ng-app="myTable">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
var myTable=angular.module('myTable',[]);
myTable.controller('tableCtrl',function($scope,$http){
$http.get("Table.json").success(function(response){
$scope.members=response.events;
});
});
</script>
</head>
<body ng-controller="tableCtrl">
<table border="5">
<tr>
<th>Event</th>
<th>Account Shop</th>
<th>Place</th>
<th>Activity</th>
</tr>
<tr ng-repeat="member in members">
<td>{{member.Event.id}}<br>
{{member.Event.account_id}}<br>
{{member.Event.shop_id}}<br>
<td>
{{member.AccountShop.id}}<br>
{{member.AccountShop.name}}<br>
{{member.AccountShop.short_code}}<br>
</td>
<div ng-repeat="Place in member.Place">
{{Place.id}}<br>
{{Place.name}}<br>
{{Place.lk_country_code}}<br>
</div>
</td>
<td>
<div ng-repeat="Activity in member.Activity">
{{Activity.id}}<br>
{{Activity.short_description}}
</div>
</td>
</tr>
<th>Total</th>
<td>
<div ng-repeat="total members.totals">
{{totals.totals.page}}
{{totals.current}}
{{totals.count}}
{{totals.prevPage}}
{{totals.nextPage}}
{{totals.pageCount}}
{{totals.order}}
{{totals.limit}}
{{totals.options}}
{{totals.paramType}}
</table>
</body>
</html>
Table.json
{
"events": [
{
"Event": {
"id": "59",
"account_id": "1",
"shop_id": "1",
},
"AccountShop": {
"id": "1",
"name": "Gill Divers Pte Ltd",
"short_code": "GILL"
},
"Place": [
{
"id": "537",
"name": "Pulau Dayang",
"lk_country_code": "MY"
}
],
"Activity": [
{
"id": "4011",
"short_description": "sample\r\n"
},
{
"id": "106",
"short_description": "sample\r\n \r\n"
},
{
"id": "1027",
"short_description": "sample\r\n"
}
]
}
],
"totals": [],
"paging": {
"page": 1,
"current": 50,
"count": 3621,
"prevPage": false,
"nextPage": true,
"pageCount": 73,
"order": [],
"limit": 50,
"options": [],
"paramType": "querystring"
}
}
You are missing the in in your ng-repeat. Try:
<div ng-repeat="total in members.totals">
And your totals array is empty:
"totals": []
But I think your real problem is that your trying to access the wrong property and the right property isn't even available on $scope.members
myTable.controller('tableCtrl', function($scope, $http) {
$http.get("Table.json").success(function(response) {
debugger
$scope.members = response.events;
// you need the paging property which isn't in the events array
$scope.totals = response.paging;
});
});
Question: How do you clear a dynamically created ng-repeat AngularJS form field? If you can find a place I didn't look for the answer to this, I'd be surprised.
Background: I have AngularJS pulling JSON through a Service into my controller. I then use scope to ng-repeat labels for a form. I am having trouble clearing the fields. Since words don't accurately tell you what I am doing here is the basic code setup. I hacked it down to a few lines.
I've tried the old $scope.formName.inputName=""; and $scope.inputName="";, but they don't work. Any ideas or a direction to go?
http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview
<!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>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<form name="formName" id="formName" style="width: 320px">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;">
<input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
$scope.forminput = "";
};
});
You are repeating a single ngmodel="forminput" use unique for each by making forinput an object and creating unique models with keys ng-model="forminput[item.desc]"
first in your controller
$scope.forminput = {};
then in view, change input as
Demo:
// Code goes here
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.forminput = {};
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
<input name="forminput[item.desc]"
ng-model="forminput[item.desc]"
style="width:200px" type="text" value=""/>
and clearing it as
$scope.clearMe = function (){
console.log("herleme")
$scope.forminput = {};
};
If I understand, you want to clear all fields in the form on clicking the 'clear' button?
Here's a working version:
http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview
var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
{
"name": "ACCT",
"desc": "Account #",
},
{
"name": "FNAME",
"desc": "First Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "LNAME",
"desc": "Last Name",
"type": "VARCHAR",
"validation": "^[a-zA-Z\\s]+"
},
{
"name": "MNAME",
"desc": "Middle Name",
"type": "CHAR",
"validation": "^[a-zA-Z]+[1-9]+"
}
]
};
$scope.clearMe = function (){
for(var i = 0; i < $scope.currentInfo.attribute.length; i++) {
$scope.currentInfo.attribute[i].forminput = '';
}
};
});
<!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>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
<h1>Hello Plunker!</h1>
<form name="formName" id="formName">
<div ng-repeat="item in currentInfo.attribute">
<div style="float:left;">{{item.desc}} </div>
<div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/>
</div>
</div>
<button value="Clear" ng-click="clearMe()">Clear</button>
</form>
</body>
</html>
I've used the currentInfo model itself to bind the value of the inputs. This means they'll be available outside of the scope of the ng-repeat. Then the clear function iterates through each item in the 'attributes' array and sets the value to empty string.
You were on the right path, but with slight bug. All of the generated forms were bind to same model - forminput. You have to generate model binding dynamically.
<input name="forminput" ng-model="formmodel[item.name]"/>
and in the controller
$scope.formmodel = {};
check out the plunkr
Also, for generated forms check out projects as autofields, no need to reinvent the wheel.