我在指令中使用ng-options遇到了一个非常奇怪的情况。理想情况下，我试图呈现美国50个州的名单，但无论我填充数组，我都会遇到问题。基本上它将每个选择选项渲染两次，就像它经过两次循环一样，我使用Angular 1.6.3和webpack：
var ctrl = function($scope){
// $scope.states_list = statesList
$scope.states_list = [
{ abbr : 'A', name : 'Test A' },
{ abbr : 'B', name : 'Test B' },
{ abbr : 'C', name : 'Test C' },
]
$scope.init = function(){
// $scope.states_list = statesList
}
}
var directive = function(){
return {
restrict : 'E',
templateUrl : '/templates/forms/address',
controller : ctrl,
// transclude: true,
// require: 'ngModel',
replace : true,
scope : {
form : '=',
address : '='
}
}
}
module.exports = function(app){
app.directive('addressForm', directive)
}
div(ng-init="init()")
.row: .form-group.col-md-12(validate-field="form.name", error-message="Please enter a name")
label.control-label Name
input.form-control(name='name', placeholder='Name', type='text', required, ng-model="address.name")
.row: .form-group.col-md-12(validate-field="form.address1", error-message="Please enter an address")
label.control-label Address
input.form-control(name='address1', placeholder='Address', type='text', required, ng-model="address.address1")
.row: .form-group.col-md-12
label.control-label Address2
input.form-control(name='address2', placeholder='Address2', type='text', ng-model="address.address2")
.row
.form-group.col-md-6(validate-field="form.city", error-message="Please enter a city")
label.control-label City
input.form-control(name='city', placeholder='City', type='text', required, ng-model="address.city")
.form-group.col-md-3(validate-field="form.state", error-message="Please select a state")
label.control-label State / Province
select.form-control(name="state", ng-model="address.state", ng-options="st.abbr as st.name for st in states_list")
option(value="") -- Select a State --
.form-group.col-md-3(validate-field="form.postal_code", error-message="Please enter a valid ZIP Code")
label.control-label Postal/ZIP Code
input.form-control(name='postal_code', placeholder='Postal/ZIP Code', type='text', required, ng-model="address.postal_code")
input(type="hidden", name="country", value="US", ng-model="address.country")
<div ng-init="init()" address="delivery" form="ctrl.shipping_form" class="ng-isolate-scope">
<div class="row">
<div error-message="Please enter a name" class="form-group col-md-12 ng-scope" ng-class="{ 'has-error': form.name.$dirty && form.name.$invalid }" tooltip-trigger="'none'" uib-tooltip="Please enter a name" tooltip-is-open="form.name.$dirty && form.name.$invalid">
<label class="control-label">Name</label>
<input name="name" placeholder="Name" type="text" required="required" ng-model="address.name" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
</div>
</div>
<div class="row">
<div error-message="Please enter an address" class="form-group col-md-12 ng-scope" ng-class="{ 'has-error': form.address1.$dirty && form.address1.$invalid }" tooltip-trigger="'none'" uib-tooltip="Please enter an address" tooltip-is-open="form.address1.$dirty && form.address1.$invalid">
<label class="control-label">Address</label>
<input name="address1" placeholder="Address" type="text" required="required" ng-model="address.address1" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Address2</label>
<input name="address2" placeholder="Address2" type="text" ng-model="address.address2" class="form-control ng-pristine ng-untouched ng-valid ng-empty">
</div>
</div>
<div class="row">
<div error-message="Please enter a city" class="form-group col-md-6 ng-scope" ng-class="{ 'has-error': form.city.$dirty && form.city.$invalid }" tooltip-trigger="'none'" uib-tooltip="Please enter a city" tooltip-is-open="form.city.$dirty && form.city.$invalid">
<label class="control-label">City</label>
<input name="city" placeholder="City" type="text" required="required" ng-model="address.city" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
</div>
<div error-message="Please select a state" class="form-group col-md-3 ng-scope" ng-class="{ 'has-error': form.state.$dirty && form.state.$invalid }" tooltip-trigger="'none'" uib-tooltip="Please select a state" tooltip-is-open="form.state.$dirty && form.state.$invalid">
<label class="control-label">State / Province</label>
<select name="state" ng-model="address.state" ng-options="st.abbr as st.name for st in states_list" class="form-control ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- Select a State --</option>
<option label="Test A" value="string:A">Test A</option>
<option label="Test B" value="string:B">Test B</option>
<option label="Test C" value="string:C">Test C</option>
<option label="Test A" value="string:A">Test A</option>
<option label="Test B" value="string:B">Test B</option>
<option label="Test C" value="string:C">Test C</option>
</select>
</div>
<div error-message="Please enter a valid ZIP Code" class="form-group col-md-3 ng-scope" ng-class="{ 'has-error': form.postal_code.$dirty && form.postal_code.$invalid }" tooltip-trigger="'none'" uib-tooltip="Please enter a valid ZIP Code" tooltip-is-open="form.postal_code.$dirty && form.postal_code.$invalid">
<label class="control-label">Postal/ZIP Code</label>
<input name="postal_code" placeholder="Postal/ZIP Code" type="text" required="required" ng-model="address.postal_code" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
</div>
<input type="hidden" name="country" value="US" ng-model="address.country" autocomplete="off" class="ng-pristine ng-untouched ng-valid ng-empty">
</div>
</div>
有什么想法？在此先感谢您的帮助。