如何将自定义选项添加到 ng-options 输出?
How to add custom option to ng-options output?
我在 table 中创建了一个 select 从列表中获取一些电子邮件地址。这是代码:
<td>
<select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"></select>
</td>
我会添加一个附加选项,该选项将成为最终用户的自定义选项。如果我在 <select>
中添加 <option>
它会被 Angular ng-options
覆盖
<td>
<select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails">
<option value="custom">Custom</option>
</select>
</td>
如何添加自定义选项?
我的目的是为用户添加一个 "custom" 选择:如果他们 select 该选项,他们可以写下他们自己的选择,自定义文本。
有几种方法可以解决这个问题。如果你想继续使用 ng-options
你可以使用函数。
HTML
<td>
<select
ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]"
class="form-control"
ng-model="selectedEmail"
ng-options="item as item.dest for item in BuildList()"></select>
</td>
<input type="text" placeholder="Enter Custom Option" ng-model="customText" />
BuildList 的控制器函数
$scope.BuildList = function() {
if(!$scope.customText) {
return $scope.emails;
}
var newList = angular.copy($scope.emails);
newList.push({someobjectbuildUsingCustom});
return newList ;
}
您可以使用以下语法:
<select>
<option ng-repeat="(key, value) in emails" value="{{key}}">{{value}}</option>
<option ... custom option ...>...</option>
</select>
您可以按照以下方式进行:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel" ng-options="d.value as d.label for d in data">
<option value="">any</option>
</select>
</div>
也看到这个fiddle
我在 table 中创建了一个 select 从列表中获取一些电子邮件地址。这是代码:
<td>
<select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"></select>
</td>
我会添加一个附加选项,该选项将成为最终用户的自定义选项。如果我在 <select>
中添加 <option>
它会被 Angular ng-options
<td>
<select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails">
<option value="custom">Custom</option>
</select>
</td>
如何添加自定义选项?
我的目的是为用户添加一个 "custom" 选择:如果他们 select 该选项,他们可以写下他们自己的选择,自定义文本。
有几种方法可以解决这个问题。如果你想继续使用 ng-options
你可以使用函数。
HTML
<td>
<select
ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]"
class="form-control"
ng-model="selectedEmail"
ng-options="item as item.dest for item in BuildList()"></select>
</td>
<input type="text" placeholder="Enter Custom Option" ng-model="customText" />
BuildList 的控制器函数
$scope.BuildList = function() {
if(!$scope.customText) {
return $scope.emails;
}
var newList = angular.copy($scope.emails);
newList.push({someobjectbuildUsingCustom});
return newList ;
}
您可以使用以下语法:
<select>
<option ng-repeat="(key, value) in emails" value="{{key}}">{{value}}</option>
<option ... custom option ...>...</option>
</select>
您可以按照以下方式进行:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel" ng-options="d.value as d.label for d in data">
<option value="">any</option>
</select>
</div>
也看到这个fiddle