Question

我有一个简单的AngularJS应用程序，其中包含一个包含2个字段的表单。我试图从我的控制器读取在这两个字段中输入的值但由于某种原因我总是得到未定义。我已经对我的代码进行了三次检查，但是找不到任何内容，所以我希望有人可以帮忙告诉我我做错了什么以及如何修复它。

注意：我使用的是最新的AngularJS版本1.2

app.js

'use strict';
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
       $routeProvider.when('/index', 
                {     templateUrl: 'templates/common/index.html', 
                      controller: 'IndexController'
                }).
                when('/editcontact', 
                {     templateUrl: 'templates/contacts/editContact.html', 
                      controller: 'editContactController'
                }).
                otherwise({redirectTo: '/index'});
}]);

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>myApp</title>
....
....
<script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="lib/angular/angular-sanitize.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers/contacts/editContactController.js"></script>

  </body>
</html>

editContact.html

 <form name="editContactForm">
          <div>
            <fieldset>
              <input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
              <input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
            </fieldset>

            <button type="submit" ng-click="saveContact(contacts, editContactForm)">Save</button>
            <button type="button" ng-click="cancelEdit()">Cancel</button>
          </div>
         </form>

editContactController

myApp.controller('editContactController',
        function editContactController($scope){

         $scope.saveContact = function(contacts, editContactForm){
             if(editContactForm.$valid){
                 console.log(contacts.name);                
             }
         };
});

Answer 1

你有一个错字。 ng-modal 应为 ng-model

<input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">

应该是

<input id="name" type="text" placeholder=Name..." ng-model="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-model="contacts.phone">

AngularJS数据绑定模板中的表单属性

1 个答案: