I have ASP.NET MVC application and I am trying simple example where submit form is handle by ng-submit and alert value of input using angularJS. my first part of angularJS (display record in table ng-repeat) is working but not form, not sure what I am missing here!
https://jsfiddle.net/toxic_kz/srs69ppp/2/
<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>
(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);
};
}
})();
I have added your code in a plunker to make it work.
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>