Angualrjs下拉選擇框閱讀Json對象文本

Question

我想要做的是做一個下拉選擇從json數據讀取文本。我無法讀取價值，我不知道爲什麼。

這裏是我的代碼

我的下拉框：

<label class="item item-input item-select"> 
       <b class="input-label">Claim Type:</b> 
       <select ng-model="claimType" required> 
        <option value="Select claim" title="Select Claim" selected disabled>Claim Type</option> 
        <option ng-repeat="claim in claimType " value="{{claim.value}}" 
          ng-selected="{{claim.value== claimType}}"> 
          {{claim.text}} 
           </option> 
          </select> 
         </label> 

我的JSON對象

angular.module('app') 
     .factory('WebApi', function() { 

      var claimType = [{ 
       value: "Car", 
       text: "Car", 
      }, { 
       value: "Boat", 
       text: "Boat", 
      }, { 
       value: "Others", 
       text: "Others" 
      }] 
     }) 
//Display 50 items randomly 
    var tempData = []; 
     for (var i = 0; i < 50; i++) { 
        var selectedClaimType = claimType[Math.floor((Math.random() * claimType.length))]; 
        tempData.push({ 
         claimType: selectedClaimType.text, 
        }) 
       }; 
      return { 
       getClaimTypes: function() { 

        return selectedClaimType.text; 
       }, 
      } 

在我的控制，我叫

$scope.claimType = WebApi.getClaimTypes(); 

Answer 1

您可以使用ng-options以幫助管理選擇列表。

<label class="item item-input item-select"> 
    <b class="input-label">Claim Type:</b> 
    <select ng-model="claimType" required 
     ng-options="transport.text for transport in traffic"> 
     <option value="" title="Select Claim" selected disabled>Claim Type</option> 
    </select> 
</label> 

這將結合所選transport到claimType。如果你想claimType被分配的transport.value代替的價值，你可以這樣做：

<label class="item item-input item-select"> 
    <b class="input-label">Claim Type:</b> 
    <select ng-model="claimType" required 
     ng-options="transport.text as transport.value for transport in traffic"> 
     <option value="" title="Select Claim" selected disabled>Claim Type</option> 
    </select> 
</label>