Menu
I am confused to were to start when creating my app.
When I click the add button I am wanting to show a form - Do I append a div to that button?
How do I attack this?
Code:
<body>
<div id="wrap">
<!-- Begin page content -->
<div classa="container">
<div class="page-header">
<h1>Birthday Reminders</h1>
</div>
<p>Data Here</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<a href="#">Add</a>
</div>
</div>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
254
Okay, from the top! :-)
First, you have to tell AngularJS somewhere that you're using it. The body tag is as good a place as any: <body ng-app="myApp">. This tells AngularJS to use a module called myApp as the root of your application. So let's define that now:
// app.js
var app = angular.module( 'myApp', [] );
The second argument is an array of dependencies. We won't worry about that now. So now we have a module. AngularJS is an MVC framework, so we also need to define a controller somewhere. Let's add this to our app.js file:
app.controller( 'MainCtrl', function( $scope ) {
// we control our app from here
});
The $scope variable is how we glue our controller logic to the view. Speaking of the view, we have to tell AngularJS to use this controller someplace. Let's edit the body tag once more:
<body ng-app="myApp" ng-controller="MainCtrl">
Boom! Our app works. So now AngularJS is all set up and working, so we can tackle your question.
You want to make something appear on a certain action. There's a directive for that called ngShow. It will show whatever's inside of it when the condition is true:
<form ng-show="visible">
What is visible? That's an expression. In this case, it's just a variable. Defined where? On our scope!
app.controller( 'MainCtrl', function( $scope ) {
$scope.visible = false;
});
Okay, so now it starts out as false; how do we change it to true when we click a button? There's a directive for that called ngClick that also takes an expression:
<a class="btn" ng-click="visible = true">Show the Form</a>
In this case, our expression changes the visible variable to true. And immediately, the form is shown! Here's a completed Plunker: http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview
Welcome to AngularJS!
Here are some supplemental resources you should grok:
And also join us on the Mailing List! We're good people.
66
Sounds like you're just starting to test out Angular. I've only been using it for about a week now. Things are pretty cool when you get realize how they work. Wish there were better/more documentation on it though. I drew up a quick JSFiddle example what it sounded like you were looking for. Let me know if that's somewhat of what you were looking for. Should work completely.
<div ng-controller="bdayCtrl">
<h3>Birthday Reminders</h3>
<table border="1">
<tr ng-repeat="bday in bdays">
<td>{{bday.name}}</td>
<td>{{bday.date}}</td>
</tr>
</table>
<a class="btn" ng-click="visible = true">Add new</a><br>
<form class="form-horizontal" ng-show="visible" ng-submit="newDate()">
<input type="text" ng-model="bdayname" placeholder="Name"><br>
<input type="text" ng-model="bdaydate" placeholder="Birthdate">
<button class="btn" type="submit"><i class="icon-plus"></i>Add</button>
</form>
</div>
And your script:
var app = angular.module('myApp', []);
function bdayCtrl($scope) {
$scope.bdays = [{
"name": "Jamal",
"date": "Jan 1, 1980"
}, {
"name": "Paula",
"date": "Jan 1, 2000"
}, {
"name": "Damon",
"date": "Jun 30, 1800"
}];
$scope.newDate = function () {
$scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});
$scope.bdayname = '';
$scope.bdaydate = '';
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
