Question

我很困惑，在创建我的应用时开始。

当我点击添加按钮时，我想要显示一个表单 - 我是否将div添加到该按钮？

我如何攻击这个？

代码：

<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>

Answer 1

好的，从顶部开始！： - ）

首先，您必须告诉AngularJS您正在使用它。 body标记与任何地方一样好：<body ng-app="myApp">。 This告诉AngularJS使用名为myApp的模块作为应用程序的根。现在让我们来定义：

// app.js

var app = angular.module( 'myApp', [] );

第二个参数是依赖项数组。我们现在不用担心。所以现在我们有一个module。 AngularJS是一个MVC框架，因此我们还需要在某处定义一个控制器。我们将其添加到我们的app.js文件中：

app.controller( 'MainCtrl', function( $scope ) {
  // we control our app from here
});

$scope变量是我们将控制器逻辑粘贴到视图的方式。说到这个视图，我们必须告诉AngularJS在某个地方使用这个控制器。让我们再次编辑body标记：

<body ng-app="myApp" ng-controller="MainCtrl">

轰！我们的应用程序。所以现在AngularJS已经全部设置好了，所以我们可以解决你的问题。

您希望在某个操作上显示某些内容。有一个名为ngShow的指令。当条件为真时，它将显示其中的内容：

<form ng-show="visible">

什么是visible？那是expression。在这种情况下，它只是一个变量。定义在哪里？在我们的范围内！

app.controller( 'MainCtrl', function( $scope ) {
  $scope.visible = false;
});

好的，现在开始时为false;当我们点击按钮时，我们如何将其更改为true？有一个名为ngClick的指令，它也带有一个表达式：

<a class="btn" ng-click="visible = true">Show the Form</a>

在这种情况下，我们的表达式会将visible变量更改为true。然后立即显示表单！这是一个完整的Plunker：http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

欢迎来到AngularJS！

以下是您应该了解的一些补充资源：

教程：http://docs.angularjs.org/tutorial
指南：http://docs.angularjs.org/guide/
从jQuery迁移："Thinking in AngularJS" if I have a jQuery background?

并加入我们的Mailing List！我们是好人。

Answer 2

听起来你刚刚开始测试Angular。我现在只用了一个星期了。当你意识到它们是如何工作的时候，事情就很酷了。希望有更好/更多的文档。我提出了一个快速JSFiddle example听起来像你正在寻找的东西。如果这有点像你在寻找的那些，请告诉我。应该完全运作。

<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>

你的剧本：

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 = '';
};
}

Answer 3

您可以找到一个简单且更复杂的例子来创建没有先验知识的Angular应用程序：

Formatting an html element

和

Adding a data edit facility

它们应该有助于简化熟悉。

从Angular JS开始的基本指南

3 个答案: