在HTML中輸入「checked」和「selected」不適用於AngularJS

Question

我正在學習AngularJS和用戶輸入。在我的代碼中，我試圖設置默認狀態下拉菜單和單選按鈕與「選擇」和「檢查」。

然而，他們不在一起「NG-模式」屬性工作。

此外，對於第一個單選按鈕（升序），空值屬性似乎阻礙了「檢查」屬性。

任何人都可以解釋爲什麼發生這種情況，以及如何繞過這個問題？

<div class="search"> 
<h1>Artist Directory</h1> 

    <label> Search: </label> 
     <input ng-model="query" placeholder="Search for artists" autofocus> 
    <label class="formgroup">by: 
     <select ng-model="listOrder" name="direction"> 
      <option value ="name" selected="selected"> Name</option> 
      <option value="reknown"> Reknown</option> 
     </select> 
    </label> 

    <label class="formgroup"> 
     <input ng-model="direction" type="radio" value=" " checked> Ascending 
    </label> 

    <label class="formgroup"> 
     <input ng-model="direction" type="radio" value="reverse"> Descending 
    </label> 

</div> 

Answer 1

綁定您的按鈕並選擇一個ng模型。默認值是您在第一次創建範圍時放入模型中的值。當用戶點擊則值將被更新：

function test($scope) { 
 
    $scope.selected = ['1','3']; 
 
    $scope.checked = "green"; 
 
}

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

 
<div ng-app> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="test"> 
 
      <select name="" ng-model="selected" multiple> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
     </select> 
 
     <br><br> 
 
     <input type="radio" ng-model="checked" value="red"> Red <br/>  
 
     <input type="radio" ng-model="checked" value="green"> Green <br/> 
 
     <input type="radio" ng-model="checked" value="blue"> Blue <br/> 
 
      
 
      
 
     <br> 
 
     Selected : {{selected}} 
 
     <br> 
 
     Checked : {{checked}} 
 
    </div> 
 
</div>

看到它在行動：http://jsfiddle.net/913n30zf/

Answer 2

選擇在AngularJS看起來喜歡這樣的：

<select ng-model="selectedOpt" 
     ng-options="opt for opt in listOrder"> 
</select> 

，背您設置的控制器

$scope.selectedOpt = $scope.listOrder[0]; 

你想要哪個選項是默認選擇。