AngularJS Form submit

Question

Работа с моим первым маленьким приложением AngularJS У меня проблемы с формой отправки. Я работал по курсу CodeSchool и сам разобрался в самой себе, но эта форма подала вещь ... ну, я просто не понимаю, где я ошибаюсь, поэтому было бы неплохо, если бы вы могли показать мне правильное решение, поэтому я могу продолжать.

Проект: Простой Список тренировок, где вы можете перечислить все учебные занятия, которые у вас были. Это мой HTML, элемент 3 проблема:

<header class="wob-masthead container-fluid"> 
     <div class="row"> 
       <div class="col-md-6" ng-init="tab = 1"> 
         <ul class="nav nav-pills"> 
           <li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1">Overview</a></li> 
           <li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Stats</a></li> 
           <li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3">New</a></li> 
         </ul> 
       </div> 
       <div class="col-md-6"> 
         <form class="navbar-form pull-right" role="search"> 
           <div class="form-group"> 
             <input type="text" class="form-control" placeholder="Search"> 
           </div> 
           <button type="submit" class="btn btn-default">Search</button> 
         </form> 
       </div> 
     </div> 
    </header> 
    <section class="wob-main mainlist container" id="headjump"> 



    <!--- ========================================== 
    Element 1: Overview 
    ============================================= --> 



    <div class="subsite" ng-show="tab === 1"> 
     <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div> 
     <h1>WorkoutBuddy</h1> 
    <div class="table-responsive" ng-controller="ListController as listing">   
    <table class="table table-hover"> 
    <thead> 
     <tr> 
       <th class="col-md-2">Date</th> 
       <th class="col-md-8">Type</th> 
       <th class="col-md-1">Repeat</th> 
       <th class="col-md-1">Time</th> 
     </tr> 
    </thead> 
    <tbody ng-controller="ListController as listing"> 
     <tr ng-repeat="wo in listing.sessions"> 
       <td>{{wo.date | date:'dd/MM/yyyy'}} </td> 
       <td>{{wo.name}}</td> 
       <td>{{wo.repeat}}</td> 
       <td>{{wo.time}} Minutes</td> 
     </tr> 
    </tbody> 
    </table> 
     </div> 
    </div> 


    <!--- ========================================== 
    Element 2: Stats 
    ============================================= --> 




    <div class="subsite" ng-show="tab === 2"> 
     <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div> 
     <h1>Stats</h1>   
    <!-- Ende Subsite --> 
    </div> 



    <!--- ========================================== 
    Element 3: New 
    ============================================= --> 


    <div class="subsite" ng-show="tab === 3"> 
     <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div> 
     <h1>New</h1> 

    <div class="table-responsive" ng-controller="ListController as listing">   
    <table class="table table-hover"> 
    <thead> 
     <tr> 
       <th class="col-md-2">Date</th> 
       <th class="col-md-8">Type</th> 
       <th class="col-md-1">Repeat</th> 
       <th class="col-md-1">Time</th> 
     </tr> 
    </thead> 
    <tbody ng-controller="ListController as listing"> 
     <tr ng-repeat="wo in listing.sessions | limitTo:2"> 
       <td>{{wo.date | date:'dd/MM/yyyy'}} </td> 
       <td>{{wo.name}}</td> 
       <td>{{wo.repeat}}</td> 
       <td>{{wo.time}} minutes</td> 
     </tr> 
    </tbody> 
    </table> 
     </div> 

    <form name="WorkoutForm" ng-controller="EntryController as entryCtrl"> 

    <blockquote> 
     <h3>Last Workout:</h3> 
     <strong>{{entryCtrl.wo.name}}</strong><br> 
     <small>am: {{entryCtrl.wo.date}}</small><br> 
     {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes. 
    </blockquote> 


     <input ng-model="entryCtrl.wo.date" type="date" placeholder="date" /> 
     <input ng-model="entryCtrl.wo.name" type="name" placeholder="name" /> 
     <input ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" /> 
     <input ng-model="entryCtrl.wo.time" type="time" placeholder="time" /> 
     <input type="submit" value="Add" /> 
    </form> 
    <!-- Ende Subsite --> 
    </div> 
    </section> 

я стиле его Bootstrap и это мой app.js:

(function(){  
    var app = angular.module('wobuddy', [ ]); 

    app.controller('ListController', function(){ 
     this.sessions = wos;  
    }); 

    var wos = [ 
    { 
     name: 'Squat', 
     date: '01.01.2015', 
     repeat: 50, 
     time: 10 
    }, 
    { 
     name: 'Push Ups', 
     date: '01.01.2015', 
     repeat: 50, 
     time: 10 
    } 
    ]; 

    })(); 

Переключение между разделами с помощью СЧА работает довольно хорошо, и также распечатывая данные-элементы в таблице, но когда я нажимаю кнопку «Отправить ничего» - действительно надеюсь, что вы можете помочь мне узнать :-)

Answer 1

Вам нужно сделать EntryController, который добавит новый объект к концу wos коллекции. Что-то вроде этого:

app.controller('EntryController', function($scope) { 
    $scope.wo = {}; 
    $scope.submit = function() { 
    wos.push($scope.wo); 
    $scope.wo = {}; // Clear the form fields 
    }; 
}); 

Тогда ваш HTML для этого раздела может выглядеть примерно так:

<form name="WorkoutForm" ng-controller="EntryController"> 
    <blockquote> 
     <h3>Last Workout:</h3> 
     <strong>{{wo.name}}</strong><br> 
     <small>am: {{wo.date}}</small><br> 
     {{wo.repeat}} repeats in {{wo.time}} minutes. 
    </blockquote> 

    <input ng-model="wo.date" type="date" placeholder="date" /> 
    <input ng-model="wo.name" type="name" placeholder="name" /> 
    <input ng-model="wo.repeat" type="repeat" placeholder="repeat" /> 
    <input ng-model="wo.time" type="time" placeholder="time" /> 
    <button ng-click="submit()">Add</button> 
</form> 

Обратите внимание, что это более привычно для контроллера для передачи данных в шаблон через $scope объекта, а не через сам объект контроллера.

Answer 2

Если вы посмотрите на HTML-форму HTML, я думаю, вы пропустили атрибут name внутри своей формы а также директива ng-submit отсутствует h будет вызван после формы отправки. Проверяйте проверку формы внутри контроллера с помощью метода $valid() и выполняйте повторную публикацию для пользователя.

HTML

<form name="workoutForm" ng-controller="ReviewController as reviewCtrl" ng-submit="submit(workoutForm, entryCtrl.wo)"> 

    <blockquote> 
     <h3>Last Workout:</h3> 
     <strong>{{entryCtrl.wo.name}}</strong> 
     <br> 
     <small>am: {{entryCtrl.wo.date}}</small> 
     <br> {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes. 
    </blockquote> 


    <input name="date" ng-model="entryCtrl.wo.date" type="date" placeholder="date" /> 
    <input name="name" ng-model="entryCtrl.wo.name" type="name" placeholder="name" /> 
    <input name="repeat" ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" /> 
    <input name="time" ng-model="entryCtrl.wo.time" type="time" placeholder="time" /> 
    <input type="submit" value="Add" /> 
</form> 

Контроллер

$scope.submit = function(workoutForm, item){ 
    if(workoutForm.$valid) 
    //then make $http.post by sending item values 
    else 
    //show error 
}; 

Answer 3

UPDATE

<html ng-app='demoApp'> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 


<form ng-controller="validationCtrl"> 
    <input type="text" placeholder="Name...." ng-model="user.name"/> 
    <input type="text" placeholder="Password...." ng-model="user.pass"/> 
    <input type="text" placeholder="Mobile...." ng-model="user.mo"/> 
    <input type="submit" ng-click="alldata(user)"/> 
</form> 
<script> 
//This is controller 
var app = angular.module('demoApp', []); 
app.controller('validationCtrl', function($scope) { 

    $scope.alldata=function(user) 
    { 
    alert(JSON.stringify(user)); 
    } 
}); 
</script> 

</body> 
</html>