AngularJS數據綁定模板中的表單屬性

我有一個簡單的AngularJS應用程序，其中包含2個字段的單個窗體。我試圖從我的控制器讀取這兩個字段中輸入的值，但出於某種原因，我總是得到未定義的值。我已經三重檢查了我的代碼，但找不到任何內容，所以我希望有人能夠幫助並告訴我我做錯了什麼以及如何解決它。AngularJS數據綁定模板中的表單屬性

注：我使用最新的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);     
      } 
     }; 
});

來源

2014-03-06 MChan

'NG-model'不'modal'carefull –

非常感謝您的幫助 – MChan

您有一個錯字。 NG-模式應該NG-模式

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

來源

2014-03-06 23:58:57 ryanewing

OMG，我可以」我相信這是......我花了這個文學時間，從來沒有注意到它！非常感謝你的幫助！ – MChan

AngularJS數據綁定模板中的表單屬性

回答

相關問題