angularjs驗證和單選按鈕默認選擇不工作

這裏是我的代碼：angularjs驗證和單選按鈕默認選擇不工作

<form class="form-horizontal" 
 
    name="commentForm" 
 
    ng-submit="submitComment()" 
 
    novalidate> 
 
    <div class="form-group" 
 
    ng-class="{ 'has-error has-feedback' : commentForm.name.$invalid && !commentForm.name.$pristine }"> 
 
<label for="name" class="col-sm-2 control-label">Your name</label> 
 
<div class="col-sm-10"> 
 
    <input type="text" 
 
     name="name" 
 
     class="form-control" 
 
     placeholder="your name" 
 
     ng-model="comment.name" 
 
     id="name"> 
 
    <span class="help-block" 
 
     ng-show="commentForm.name.$error.required && !commentForm.name.$pristine"> 
 
    Name required 
 
    </span> 
 
</div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
<label for="radio" class="col-sm-2 control-label" > Rating </label> 
 
    <div class="col-sm-10"> 
 
    <label class="radio-inline" ng-repeat="star in stars"> 
 
    <input type="radio" name="star.value" 
 
      ng-value="{{star.value}}" 
 
      ng-model="comment.rating" 
 
      ng-checked="isSelected(star.value)"> 
 
    {{star.value}} 
 
    </label> 
 
</div> 
 
    </div> 
 
    
 
    <div class="form-group" ng-class="{'has-error has-feedback':comment.textComments.$error.required && !comment.textComments.$pristine}"> 
 
<label for="name" class="col-sm-2 control-label">Your comments</label> 
 
<div class="col-sm-10"> 
 
    <textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" placeholder="your comments"> 
 
    </textarea> 
 
    <span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span> 
 
</div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
<div class="col-sm-offset-2 col-sm-10"> 
 
    <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button> 
 
</div> 
 
    </div> 
 
</form>

，這裏是我的腳本

.controller('DishCommentController', ['$scope', function($scope) { 
 
      
 
    var stars=[ 
 
      {value:"1"}, 
 
      {value:"2"}, 
 
      {value:"3"}, 
 
      {value:"4"}, 
 
      {value:"5"} 
 
     ]; 
 
     
 
    $scope.isSelected = function(checkStar){ 
 
console.log(checkStar==5); 
 
return checkStar==5; 
 
    }; 
 
     
 
    $scope.stars=stars; 
 
     
 
    $scope.comment={name:"",rating:"",textComments:"",date:""}; 
 
      
 
    $scope.submitComment = function() { 
 
           
 
$scope.comment.date=new Date().toISOString(); 
 
// Step 3: Push your comment into the dish's comment array 
 
$scope.dish.comments.push("Your JavaScript Object holding the comment"); 
 
    
 
    } 
 
}]);

請someon e在此幫助我

來源

2016-06-12 vihang shah

您在輸入字段中缺少'required'屬性，並且您嘗試訪問未定義對象'$ scope.dish.comments'的屬性。

見下面的代碼：

(function() { 
 
    'use strict'; 
 
    angular.module('app', []).controller('DishCommentController', DishCommentController); 
 

 
    function DishCommentController($scope) { 
 
    var stars = [{ 
 
     value: "1" 
 
     }, { 
 
     value: "2" 
 
     }, { 
 
     value: "3" 
 
     }, { 
 
     value: "4" 
 
     }, { 
 
     value: "5" 
 

 
     } 
 

 
    ]; 
 
    $scope.isSelected = function(checkStar) { 
 
     console.log(checkStar == 5); 
 
     return checkStar == 5; 
 
    }; 
 

 
    $scope.stars = stars; 
 

 
    //select default values here 
 
    $scope.comment = { 
 
     name: "", 
 
     rating: 4, 
 
     textComments: "", 
 
     date: "" 
 
    }; 
 

 
    $scope.submitComment = function() { 
 
     $scope.comment.date = new Date().toISOString(); 
 
     // Step 3: Push your comment into the dish's comment array 
 
     // $scope.dish.comments.push("Your JavaScript Object holding the comment"); 
 
    }; 
 
    } 
 

 

 
})();

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

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="DishCommentController"> 
 

 
    <form name="commentForm" ng-submit="submitComment()" novalidate> 
 
    <div class="form-group"> 
 
     <label for="name">Your name</label> 
 
     <div> 
 
     <input type="text" name="name" class="form-control" placeholder="your name" ng-model="comment.name" id="name" required> 
 
     <span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Name required</span> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 

 
     <label for="radio" class="col-sm-2 control-label">Rating</label> 
 

 
     <div class="col-sm-10"> 
 
     <label class="radio-inline" ng-repeat="star in stars"> 
 
      <input type="radio" name="star.value" ng-value="{{star.value}}" ng-model="comment.rating" ng-checked="isSelected(star.value)">{{star.value}} 
 
     </label> 
 
     </div> 
 

 

 
    </div> 
 
    <div class="form-group"> 
 
     <label for="name" class="col-sm-2 control-label">Your comments</label> 
 
     <div class="col-sm-10"> 
 
     <textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" required placeholder="your comments"> 
 
     </textarea> 
 
     <span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button> 
 
     </div> 
 
    </div> 
 

 
    </form> 
 
</body> 
 

 
</html>

來源

2016-06-12 21:24:12 felixgondwe

但是，當我們要使用HTML RYT ??這裏的角正在服用任何 –

檢查的護理本文檔的詳細信息，以驗證我們使用要求的屬性：HTTPS ：//docs.angularjs.org/api/ng/directive/input – felixgondwe

angularjs驗證和單選按鈕默認選擇不工作

回答

相關問題