Question

我有ASP.NET MVC应用程序，我正在尝试使用angularJS通过ng-submit和输入的警报值来处理提交表单的简单示例。我的第一部分angularJS（表ng-repeat中的显示记录）工作但不是形式，不知道我在这里缺少什么！

https://jsfiddle.net/toxic_kz/srs69ppp/2/

HTML

    <div>{{ "Two plus Two equals: " + (2+2) }}</div>

     <div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
       <table class="table table-responsive table-striped">
           <tr ng-repeat="trip in vm.trips">
               <td>{{ trip.name }}</td>
               <td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
               <td><a href="#" class="btn btn-sm btn-primary">Manage</a></td>
           </tr>
       </table>

             <form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
                 <div class="form-group">
                     <label for="name">New Trip Name</label>
                     <input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
                 </div>

                 <div class="form-group">
                     <label>Testing Button</label>
                     <input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
                 </div>

                 <div class="form-group">
                     <input class="btn btn-success btn-sm" type="submit" value="Add" />
                 </div>
             </form>


    </div>

AngularJS

(function () {
"use strict";

angular.module("app-trips", []);
})();

(function () {
  "use strict";

angular.module("app-trips")
    .controller("tripsControllers", tripsController);

function tripsController()
{
    var vm = this;

    vm.trips = [{
        name: "US trip",
        created: new Date()
    },
    {
        name: "World trip",
        created: new Date()
    }
    ];

    vm.newTrip = {};

    vm.addTrip() = function () {
        alert(vm.newTrip.name); 
    };

  }

})();

Answer 1

我已将您的代码添加到plunker中以使其正常工作。

app.js：

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

app.controller('tripsControllers', function($scope) {
   var vm = this;

    vm.trips = [{
        name: "US trip",
        created: new Date()
    },
    {
        name: "World trip",
        created: new Date()
    }
    ];

    vm.newTrip = {};

    vm.addTrip = function () {
        alert(vm.newTrip.name); 
    };
});

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
    <script src="app.js"></script>
  </head>

  <body>
     <div>{{ "Two plus Two equals: " + (2+2) }}</div>

     <div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
       <table class="table table-responsive table-striped">
           <tr ng-repeat="trip in vm.trips">
               <td>{{ trip.name }}</td>
               <td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
               <td><a href="#" class="btn btn-sm btn-primary">Manage</a></td>
           </tr>
       </table>

             <form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
                 <div class="form-group">
                     <label for="name">New Trip Name</label>
                     <input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
                 </div>

                 <div class="form-group">
                     <label>Testing Button</label>
                     <input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
                 </div>

                 <div class="form-group">
                     <input class="btn btn-success btn-sm" type="submit" value="Add" />
                 </div>
             </form>


    </div>
  </body>

</html>

https://www.codeigniter.com/user_guide/libraries/sessions.html

angularJS中的ng-model不起作用

HTML

AngularJS

1 个答案: