在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]; 

你想要哪个选项是默认选择。