Angularjs下拉选择框读取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>