コントローラでng-selectとif else文を使用する

Question

単純なng-selectの値をコントローラに渡し、if文を使用して、選択した値がI次のように、必要に：シンプルで

HTML

<form role="form"> 
    <div class="form-group"> 
    <label for="selectAnswerPhaseOneQuestionOne">Select answer:</label> 
    <select class="form-control" id="selectAnswerPhaseOneQuestionOne" 
    data-ng-model="questionOneAnswer" data-ng-dropdown required 
    name="type"> 
     <option></option> 
     <option value="True">True</option> 
     <option value="False">False</option> 
    </select> 
    </div> 
</form> 

<button data-ng-click="submitPhaseOneAnswers()" 
class="btn btn-primary" type="submit"> 

JS

$scope.questionOneAnswer = ''; 

$scope.submitPhaseOneAnswers = function() { 
    var score = 0; 
    if($scope.questionOneAnswer == 'True') { 
    score = score + 10; 
    alert('Your score is now ' + score); 
    } 
} 

ボタンをクリックするだけでif文がバイパスされます。最後に、私が概説した上記のコードは、私が実際にHTMLで選択したグループの4倍を含んでいます。ボタンを押すと、TrueかFalseかを評価する必要があります。

Answer 1

使用ng-options

var app = angular.module('myApp', []); 
 

 
app.controller("myCtrl", function ($scope) { 
 
    $scope.options = ['True', 'False']; 
 

 
    $scope.submitPhaseOneAnswers = function() { 
 
    var score = 0; 
 
    
 
    if($scope.questionOneAnswer == 'True') { 
 
     score += 10; 
 
    } 
 
    
 
    alert('Your score is now ' + score); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
 

 
<form role="form" ng-app="myApp"> 
 
    <div class="form-group" ng-controller="myCtrl"> 
 
    <label for="selectAnswerPhaseOneQuestionOne">Select answer:</label> 
 
    <select class="form-control" id="selectAnswerPhaseOneQuestionOne" 
 
    ng-model="questionOneAnswer" name="type" ng-options="option as option for option in options"></select> 
 
    <button ng-click="submitPhaseOneAnswers()" class="btn btn-primary">Submit</button> 
 
    </div> 
 
</form>

Answer 2

コードをステップごとに確認できます。

1. （同じ名前を持つ）HTMLファイルとJSファイルに

2. をコントローラ名を確認プットにconsole.log（）関数$ scope.submitPhaseOneAnswersで（）時にクリックボタン、それが実行されているかどうかを確認します。

3. 機能がうまくいくと、おそらく$ scope.questionOneAnswer = ''が原因でエラーが発生します。