Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
28
rated 0 times [  32] [ 4]  / answers: 1 / hits: 18882  / 11 Years ago, fri, march 15, 2013, 12:00:00

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>

More From » jquery

 Answers
6

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.


[#79567] Thursday, March 14, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alorac

Total Points: 262
Total Questions: 82
Total Answers: 97

Location: Libya
Member since Mon, Dec 7, 2020
3 Years ago
alorac questions
Sat, Oct 10, 20, 00:00, 4 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Wed, Jul 1, 20, 00:00, 4 Years ago
Wed, Jun 3, 20, 00:00, 4 Years ago
Sun, May 17, 20, 00:00, 4 Years ago
;