Подтвердить что ты не робот

Руководство по началу работы с Angular JS

Я запутался, чтобы начать с создания моего приложения.

Когда я нажимаю кнопку "Добавить", я хочу показать форму. Добавляю ли я эту кнопку к этой кнопке?

Как мне атаковать это?

Код:

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

ОТВЕТЫ

Ответ 1

Хорошо, сверху!: -)

Во-первых, вы должны сказать, что AngularJS где-то используется. Тег body так же хорош, как и любой: <body ng-app="myApp">. Это говорит, что 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">

Boom! Наше приложение работает. Итак, теперь 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!

Вот некоторые дополнительные ресурсы, которые вы должны выполнить:

И присоединяйтесь к нам в Mailing List! Мы хорошие люди.

Ответ 2

Похоже, вы только начинаете тестировать Angular. Я использую его уже около недели. Все довольно круто, когда вы понимаете, как они работают. Хотелось бы, чтобы на нем было больше/больше документации. Я составил быстрый пример JSFiddle, как он выглядел так, как вы искали. Дайте мне знать, если вы это ищете. Должен работать полностью.

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

И ваш 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 = '';
};
}