Question

我在Angular中使用<select>和ng-repeat时出现问题。

我正在使用以下代码：

HTML：

<select ng-model="device.remote" ng-repeat="remoteID in device.remoteIDs">
    <option value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>

角：

$scope.device = response.data;

response.data看起来像这样：

{
    "remote": "",
    "remoteIDs": [
        {
            "id": "1",
            "name": "TEST"
        }
    ]
}

在WebApp中，我得到了这个结果：

<option value="? string: ?"></option>
<option value="1" class="ng-binding">TEST</option>

但我不想显示? string: ? - 选项。我该如何删除它？

我只想在remoteIDs

中显示选项

Answer 1

您需要为用户提供默认选项。

您只需添加以下内容即可完成此操作：

<option value="" disabled="true">Please Select</option>

请参阅代码中的示例。

＆＃13;

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.device = {
      "remote": "",
      "remoteIDs": [
          {
              "id": "1",
              "name": "TEST"
          }
      ]
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">
    <select ng-model="device.remote" class="mySelect">
      <option value="" disabled="true">Please Select</option>
      <option value="{{ remoteID.id }}" ng-repeat="remoteID in device.remoteIDs">{{ remoteID.name }}           </option>
  </select>
  </div>
</body>

＆＃13;

Answer 2

<select ng-model="device.remote>
    <option ng-repeat="remoteID in device.remoteIDs" 
        ng-if="remoteID.id" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>

Answer 3

不明白为什么在ng repeat元素中使用select。在options

中使用它

 <select ng-model="device.remote">
        <option  ng-repeat="remoteID in device.remoteIDs" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
    </select>

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.device = {
    "remote": "",
    "remoteIDs": [
        {
            "id": "1",
            "name": "TEST"
        }
    ]
}

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-model="device.remote">
    <option  ng-repeat="remoteID in device.remoteIDs" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>
</div>

＆＃13;

Answer 4

如果要删除该空选项，则应选择第一个选项作为默认选项。或者你可以给出一个没有任何价值的空选项请参阅代码段，

 <form action="{{url('secure-checkout/'.$form->unique_url_code)}}" method="POST" id="payment-form" name="payment-form">

角度：使用ng-repeat选择选项

4 个答案: