繁体   English   中英

AngularJS:ng提交不起作用

[英]AngularJS: ng-submit not working

在尝试重构索引表之前,我的addAct()函数运行良好。 现在它没有响应。 例如,控制台中什么也没有。 也许有人可以帮助我弄清楚发生了什么事。 我两次使用_form.html部分,但请看一下id="newAct"

行为/模板/index.html

<div class="actions_body">
  <div class="container">
    <h2>Listing Actions</h2>

    <div class="body">
      <table class>
        <thead>
          <tr class="row">
            <th class="col-md-2 active">
              <label>Name</label>
            </th>
            <th class="col-md-5">Description</th>
            <th class="col-md-2">Inspires</th>
            <th colspan="2" class="col-md-2">Modify</th>
          </tr>
        </thead>
        <tbody ng-repeat="act in acts">
          <tr class="row">
            <td class="col-md-2"><a href="" ng-click="linkToShowAct(act)">{{act.name}}</a></td>
            <td class="col-md-5">{{act.description}}</td>
            <td class="col-md-2">{{act.inspires}}</td>
            <td class="col-md-1"><button ng-click="updateActShow=true">Edit</button></td>
            <td class="col-md-1"><button ng-click="deleteAct(act)">Delete</button>

          <tr ng-show="updateActShow" ng-include="'acts/templates/_form.html'"></tr>
        </tbody>

        <tbody>
          <tr class="row">
            <button ng-click="newActShow=true">New Action</button>
            <button ng-click="newActShow=false">Hide</button>
          </tr>
          <tr ng-show="newActShow" id="newAct" ng-include="'acts/templates/_form.html'"></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

行为/模板/_form.html

<div class="row" ng-controller="ActsController">
  <form ng-submit="addAct()">
    <td class="col-md-2">
      <label for="newActName">Name</label>
      <input type="text" ng-model="newAct.name" id="newActName" placeholder="Name" class="form-control">
    </td>
    <td class="col-md-4">
      <label for="newActDescription">Description</label>
      <input type="textarea" ng-model="newAct.description" id="newActDescription" placeholder="Description" class="form-control">
    </td>
    <td class="col-md-2">
      <label for="newActInspires">Inspires</label>
      <input type="number" ng-model="newAct.inspires" id="newActInspires" placeholder="Inspires" class="form-control">
    </td>
    <td class="col-md-2">
      <input type="submit" value="+" class="btn btn-success">
    </td>
  </form>
</div>

行为/控制器/ActsController.js

controllers = angular.module('controllers');

controllers.controller('ActsController', [
    '$scope', 
    '$routeParams', 
    '$location', 
    '$resource', 
    function($scope,$routeParams,$location,$resource) {

        var Act = $resource('/acts/:actId', {
            actId: "@id",
            format: 'json'
        },  {
            'create': {
                method: 'POST'
            }
        });

        $scope.acts = Act.query();

        $scope.addAct = function() {
            act = Act.save($scope.newAct, function() {
                $scope.acts.push(act);
                $scope.newAct = '';
            });
        }

        $scope.deleteAct = function(act) {
            act.$delete();
            $scope.acts.splice($scope.acts.indexOf(act), 1);
        }

        $scope.linkToShowAct = function(act) {
            return $location.path('/acts/' + act.id);
        } 
}]);

您的表不在ActsController范围内。 您需要将ng-controller="ActsController"放在表格周围的元素之一上。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM