Hi I am having some categories displayed and I want to show create bookmark div when a particular category is selected and not when all of the categories are displayed.
I tried the following code.It hides the div even if I try to return hardcoded "true". Please let me know what I am doing wrong here !
http://codepen.io/anon/pen/pJRRvE
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
<a ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<!--CREATING -->
<div ng-if="shouldShowCreating()">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
Create Bookmark
</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app/eggly-app.start.js"></script>
</body>
angular.module('Eggly', [
])
.controller('MainCtrl', function ($scope) {
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks = [
{"id": 0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id": 1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id": 2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id": 3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id": 4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id": 5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id": 6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id": 7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id": 8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
$scope.isCreating = false;
$scope.isEditing = false;
function isCurrentCategory(category) {
return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
}
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.isCurrentCategory = isCurrentCategory;
$scope.setCurrentCategory = setCurrentCategory;
function shouldShowCreating() {
// return $scope.currentCategory && !$scope.isEditing;
return true;
}
})
;
The method shouldShowCreating is a "private" method of your controller and not part of the $scope. To access the method from your template, you need to change it to:
$scope.shouldShowCreating = function() {
return $scope.currentCategory && !$scope.isEditing;
}
Related
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.
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>
I have json output from api wants to display in ng-repeat on div
[
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
]
I want to display like this
<div class="list-row">
<div class="list-cell">abc</div>
<div class="list-cell">Jaakr1</div>
<div class="list-cell">poonam.kumar#abc.com</div>
<div class="list-cell">Developer 1</div>
</div>
<div class="list-row">
<div class="list-cell"></div>
<div class="list-cell">janam1</div>
<div class="list-cell">raja#abc.com</div>
<div class="list-cell">Developer 2</div>
</div>
Please provide the solution
Apart from all the answers posted above i would like to post mine that will handle multiple JSON objects inside the array. Since you have only one object right now one of the above solution may work but when you have more that one object inside the array then this will work great.
HTML
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="(key1, value1) in data">
<div class="list-row" ng-repeat="(key2, value2) in data[key1].namesList">
<div class="list-cell"><span ng-if='$index == 0'>{{data[key1].companyName}}</span> </div>
<div class="list-cell">{{value2.name}}</div>
<div class="list-cell">{{value2.email}}</div>
<div class="list-cell">{{value2.job}}</div>
</div>
</div>
</div>
Controller
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.data = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
},
{
"companyName": "abc2",
"namesList": [
{
"name": "Jaakr12",
"email": "poonam.kumar#abc.com2",
"job": "Developer 12"
},
{
"name": "janam12",
"email": "raja#abc.com2",
"job": "Developer 22"
}
]
}
];
})
For more generalization i have added two JSON objects inside the array and the output is exactly what you expected. To play around i have added the JSFIDDLE
<div *ngFor="let person of jsonObj.namesList">
<div class="list-cell"></div>
<div class="list-cell">{{ person.name }}</div>
<div class="list-cell">{{ person.email }}</div>
<div class="list-cell">{{ person.job}}</div>
</div>
You can do this,
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.myArray = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
];
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
</body>
</html>
You can do something like this:
<div class="list-row" ng-repeat="nameObj in data.namesList">
<div class="list-cell">{{data.companyName}}</div>
<div class="list-cell">{{nameObj.name}}</div>
<div class="list-cell">{{nameObj.email}}</div>
<div class="list-cell"{{nameObj.job}}</div>
</div>
Is there any option to open first accordion on the basis of ngRepeat ?
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.status = {
isFirstOpen: true,
oneAtATime: true
};
$scope.cards = [{
"id": 1,
"bankid": 999999,
"type": "VISA",
"no": "1234 5678 9012 3456",
"from": "01/06",
"expiry": "05/18",
"cvv": 345,
"name": "Kallayi Basheer Shah"
}, {
"id": 2,
"bankid": 888888,
"type": "Master",
"no": "3456 7890 1234 5678",
"from": "06/12",
"expiry": "07/16",
"cvv": 678,
"name": "Shah Basheer"
}, {
"id": 3,
"bankid": 777777,
"type": "VISA",
"no": "9012 3456 1234 5678",
"from": "03/10",
"expiry": "08/17",
"cvv": 123,
"name": "Basheer Shah Kallayi"
}];
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
<div class="row">
<div class="col-md-12">
<accordion close-others="status.oneAtATime">
<accordion-group ng-repeat="card in cards">
<accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
<div class="row">
<div class="col-sm-12">
Name on card: {{card.name}}
<br>Card type: {{card.type}}
</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>
While assigning is-open to a model certainly works, if you are not planning to change the behavior dynamically, you can also fix it to the first element using
is-open="$first"
Yes, the angular-ui accordion has the is-open attribute which is compatible with ng-repeat.
Using $first works if all you have in your <accordion-heading> is static behavior/ content as #Icycool states in their answer.
If you wanted to make use of the changing chevrons angular-ui uses in their accordion example however, this would not work.
In order to have the first item default to open and still maintain chevron (or other content) updates, simply give the first item its own accordion group, a boolean in the scope, and refer to the 0th index like so:
accordionController.js:
$scope.isFirstOpen = true;
accordionExample.html:
<accordion-group is-open="isFirstOpen" ng-if="cards.length > 0">
<accordion-heading>
<div>
<i class="glyphicon glyphicon-credit-card"></i>
<strong>{{cards[0].no}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':
isFirstOpen, 'glyphicon-chevron-right': !isFirstOpen}"></i>
</div>
</accordion-heading>
<div>
Name on Card: {{cards[0].name}} <br>
Card Type: {{cards[0].type}}
</div>
</accordion-group>
Then, create the rest similarly, giving them their own open boolean and using the array's slice() method to refer to all the rest of the items like so:
accordionController.js:
$scope.isOpen = false;
accordionExample.html:
<accordion-group ng-repeat="card in cards.slice(1)" is-open="isOpen">
<accordion-heading>
<div>
<i class="glyphicon glyphicon-credit-card"></i>
<strong>{{card.no}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':
isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</div>
</accordion-heading>
<div>
Name on Card: {{card.name}} <br>
Card Type: {{card.type}}
</div>
</accordion-group>
Check out this CodePen demo to see it in action: http://codepen.io/anon/pen/JdpNgB?editors=101
In the template, bind the is-open property of the accordion as follow:
<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">
and in the controller: $scope.status = { isItemOpen: [true] };
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.status = {
isFirstOpen: true,
oneAtATime: true,
isItemOpen: [true]
};
$scope.cards = [{
"id": 1,
"bankid": 999999,
"type": "VISA",
"no": "1234 5678 9012 3456",
"from": "01/06",
"expiry": "05/18",
"cvv": 345,
"name": "Kallayi Basheer Shah"
}, {
"id": 2,
"bankid": 888888,
"type": "Master",
"no": "3456 7890 1234 5678",
"from": "06/12",
"expiry": "07/16",
"cvv": 678,
"name": "Shah Basheer"
}, {
"id": 3,
"bankid": 777777,
"type": "VISA",
"no": "9012 3456 1234 5678",
"from": "03/10",
"expiry": "08/17",
"cvv": 123,
"name": "Basheer Shah Kallayi"
}];
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" ng-app='myApp' ng-controller="myCtrl">
<div class="row">
<div class="col-md-12">
<accordion close-others="status.oneAtATime">
<accordion-group ng-repeat="card in cards" is-open="status.isItemOpen[$index]">
<accordion-heading><i class="glyphicon glyphicon-credit-card"></i> {{card.no}}</accordion-heading>
<div class="row">
<div class="col-sm-12">
Name on card: {{card.name}}
<br>Card type: {{card.type}}
</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js'></script>
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.