ng-model vs ngModel - 打破錶格

我有一個小的電子郵件表格。

這工作：

<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal"> 
     <p ng-show="success"><b>We received your message</b></p> 
     <p ng-show="error">Something wrong happened!, please try again.</p> 

       <label for="name">Name:</label><br> 
       <input type="text" id="name" name="name" ng-model="input.name" required><br> 

       <label for="email">Email:</label><br> 
       <input type="email" id="email" name="email" ng-model="input.email" required><br> 

       <label for="messsage">Message:</label><br> 
       <textarea id="messsage" name="message" ng-model="input.message" ngMaxlength='2000' required></textarea><br> 

     <button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button> 
    </form>

這不起作用：

<form method="post" name="form" role="form" ng-controller="contactForm" ng-submit="form.$valid && sendMessage(input)" novalidate class="form-horizontal"> 
     <p ng-show="success"><b>We received your message</b></p> 
     <p ng-show="error">Something wrong happened!, please try again.</p> 

       <label for="name">Name:</label><br> 
       <input type="text" id="name" name="name" ngModel="input.name" required><br> 

       <label for="email">Email:</label><br> 
       <input type="email" id="email" name="email" ngModel="input.email" required><br> 

       <label for="messsage">Message:</label><br> 
       <textarea id="messsage" name="message" ngModel="input.message" ngMaxlength='2000' required></textarea><br> 

     <button type="submit" name="submit" ng-disabled="error" value="submit">Submit</button> 
    </form>

爲2個輸入和textarea的，如果我使用 'NG-模式' 的電子郵件發送，但頁面加載時，表單加載無效。如果我使用'ngModel'表單加載乾淨，但電子郵件不會提交。

這裏控制器：

app.controller("contactForm", ['$scope', '$http', function($scope, $http) { 
    $scope.success = false; 
    $scope.error = false; 

    $scope.sendMessage = function(input) { 
     $http({ 
      method: 'POST', 
      url: 'processForm.php', 
      data: input, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }) 
     .success(function(data) { 
     if (data.success) { 
      $scope.success = true; 
     $scope.input.name=""; 
     $scope.input.email=""; 
     $scope.input.message=""; 
     } else { 
      $scope.error = true; 
     } 
     }); 
    }

你可以看到它住在這裏： http://smartestdiner.com/Bethel/indexx.html#/contact 警告：有一些惱人的紅色背景

.ng-invalid{ 
    background-color:red; 
} 
    }]);

這就是我們如何知道它加載無效地。

來源

2015-01-06 hogarth45

令人討厭的紅色背景是形式，因爲您有一個非常普遍的規則，由.ng-invalid設置，該類也將設置在窗體上。您需要使表單中的輸入和控件更具體。

例子：

input.ng-invalid, 
textarea.ng-invalid { 
    background-color:red; 
}

或在復位規則form.ng-invalid

要添加上沒有什麼所謂的ngModel是ng-model。使用前者不會做任何事情，但會在元素上添加一個虛擬屬性，但它不起作用。它是命令命名的角色方式，因爲html不區分大小寫，一種角度可以從屬性或元素名稱（基於限制）識別命令。它將它轉換爲駱駝來評估和處理相應的指令（或指令屬性綁定）。如果您沒有指定ng-model，並且表單或控件沒有novalidate屬性，那麼瀏覽器的HTML5驗證就是您所看到的不一致。使用HTML5 novalidate屬性確保在表單上不會發生本機驗證。

來源

2015-01-06 02:28:13 PSL

實現，得益於任何有關下一代猜測-modelvs ngModel問題？ – hogarth45

我沒有看到這個問題的部分.. :) – PSL

我不明白你的意思是'爲2輸入和textarea，如果我使用'ng-model'電子郵件發送，但當頁面加載時，表單加載無效。如果我使用'ngModel'表單加載乾淨，但電子郵件不會提交。 – PSL

ng-model是當你寫視圖（HTML部分）。
ngModel用於編寫自定義指令。它被放置在「規定：」。PARAM好讓你可以訪問，的變量，比如ngModel $ modelValue

ngModel $ modelValue將已經輸入通過實時用戶的最新內容。所以，它可以用於驗證等。

查看代碼： -

<!doctype html> 
<html ng-app="plankton"> 
<head> 
    <script src="/bower_components/angular/angular.min.js"></script> 
    <script src="/scripts/emailing/emailing.directive.js"></script> 
</head> 
<body ng-controller="EmailingCtrl"> 
    <div> 
     <label>Enter Email: </label> 
     <emailing id="person_email" ng-model="email_entered"></emailing> 
    </div>  
</body> 
</html>

自定義指令： -

(function() { 
    'use strict'; 

angular.module('plankton', []) 
     .directive('emailing', function emailing(){ 
     return { 
      restrict: 'AE', 
      replace: 'true', 
      template: '<input type="text"></input>', 
      controllerAs: 'vm', 
      scope: {}, 
      require: "ngModel", 
      link: function(scope, elem, attrs, ngModel){ 
       console.log(ngModel); 
       scope.$watch(function(){ return ngModel.$modelValue; 
          }, function(modelValue){ 
           console.log(modelValue);//awesome! gets live data entered into the input text box 
          }); 
      }, 
     }; 
     }) 
     .controller('EmailingCtrl', function($scope){ 
      var vm = this; 

     }); 
})();

這已經在這裏毫不猶豫地掏出： - here

來源

2016-11-09 04:25:21 Plankton

ng-model vs ngModel - 打破錶格

回答

相關問題