问AngularJS表格提交
EN

Stack Overflow用户

提问于 2015-03-06 01:52:57

回答 4查看 4.5K关注 0票数 0

在开发我的第一个小型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
    }
    ];

    })();

在使用nav的部分之间切换非常好，并且打印出数据--表中的元素，但是当我按提交时，什么都不会发生--真的希望您能帮助我学习:-)

angularjs

forms

angularjs-directive

angularjs-ng-repeat

form-submit

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-03-06 02:15:59

您需要创建一个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对象而不是通过控制器对象本身将数据通信到模板。

票数 2

Stack Overflow用户

发布于 2015-03-06 02:07:53

通过查看表单HTML，我认为您忽略了表单中的name属性，并且缺少了ng-submit指令，该指令将在提交表单之后被调用。使用$valid()方法检查控制器内部的表单验证，并执行post，否则向用户发出警报。

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

票数 1

Stack Overflow用户

发布于 2016-06-22 02:29:56

更新

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