AngularJs：選擇下拉沒有顯示，而使用NG-重複

Question

這裏任何選項的形式爲： 它有兩個文本字段和選擇下拉字段

<form class="ui form" name="personalInfoForm" ng-repeat="obj in users"> 

    <div class="field"> 
    <div class="two fields"> 

     <div class="field ui right icon input"> 
      <input id="id_first_name" 
        placeholder="Reference Number" 
        name="{{ obj.name }}" 
        type="text" 
        ng-model="user.first_name" required/> 
      <i ng-show="personalInfoForm.first_name.$valid && personalInfoForm.first_name.$dirty" 
       class="tiny green checkmark icon"></i> 
      <i ng-show="personalInfoForm.first_name.$invalid && personalInfoForm.first_name.$dirty" 
       class="tiny red remove icon"></i> 
     </div> 

     <div class="field ui right icon input"> 
      <input id="id_last_name" placeholder="Date [dd-mm-yyyy]" 
        name="{{ obj.date }}" 
        type="text" ng-model="user.date" required/> 
      <i ng-show="personalInfoForm.last_name.$valid && personalInfoForm.last_name.$dirty" 
       class="tiny green checkmark icon"></i> 
      <i ng-show="personalInfoForm.last_name.$invalid && personalInfoForm.last_name.$dirty" 
       class="tiny red remove icon"></i> 
     </div> 

    </div> 
</div> 

<div class="field"> 
    <select class="ui dropdown" name="gender" ng-model="user.gender" required> 
     <option ng-repeat="val in obj.gender" value="{{val}}">{{val}}</option> 
    </select> 
    <i ng-show="personalInfoForm.gender.$valid && personalInfoForm.gender.$dirty" 
     class="tiny green checkmark icon"></i> 
    <i ng-show="personalInfoForm.gender.$invalid && personalInfoForm.gender.$dirty" 
     class="tiny red remove icon"></i> 
</div> 

<input ng-disabled="personalInfoForm.$invalid" ng-show="!hasFormBeenEdited" ng-click="update(user)" 
     value="Go to next step" 
     class="ui right floated blue button" 
     type="submit"/> 

<input ng-disabled="personalInfoForm.$invalid" ng-click="maintainUsers(user)" 
     value="Enter another item" 
     class="ui right floated blue button" 
     type="submit"/> 

</form> 

而且這是在我的控制器中的數據：

var forms = { 
     name: "first_name", 
     date: "date", 
     gender: ["debtor", "Male", "Female"] 
    }; 
    $scope.users = [forms]; 

然而，它顯示了在檢查所有選項，一個額外的一起：

<option value="? undefined:undefined ?"></option> 

頂部！我不明白這段代碼有什麼問題！

Answer 1

您可以通過這種方式

<select class="ui dropdown" name="gender" ng-model="user.gender" 
    ng-options="val as val for val in obj.gender" 
    required> 
</select> 

，並在控制器中爲您選擇選擇默認值，指定此選擇

$scope.user = {gender: forms.gender[0]}; 

Answer 2

undefined值默認值出現，因爲最初有沒有任何東西綁定在option.Also我建議你使用ng-options而不是ng-repeat。

這裏去的代碼，

<select class="ui dropdown" name="gender" ng-model="user.gender" ng-options = "val as val for val in obj.gender" required> 
    <option value="">Choose an option</option> 
</select> 

「選擇一個選項」是擺脫出現在選擇值空選項。