Question

我在Angularjs中遇到选择选项的问题这是文件js

中的代码

$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: Car });
$scope.ListOption.push({ Value: "1", Name: House });

这是代码HTML的样子

<select class="form-control" id="Category" ng-model="Category">

<option ng-repeat="option in ListOption" value="{{option.Value}}">
 {{option.Name}}</option>

</select>

生成的html是

<select class="form-control ng-pristine ng-valid" ng-model="Category" style="padding: 0px;">
<option value="? object:null ?"></option>
<option ng-repeat="option in ListOption" value="0" class="ng-binding ng-scope">Car</option>
<option ng-repeat="option in ListOption" value="1" class="ng-binding ng-scope">House</option>
</select>

我在这个问题上非常头疼。期待有人帮助我另一种方式

Answer 1

第一个选项

<option value="? object:null ?"></option>

生成

是因为未定义ngModel值Category并且select将使Caegory的值与其选项匹配。由于没有选项未定义，因此它会自行添加一个虚拟选项。

要解决这个问题，yyu可以自动将ngModel值类别初始化为第一个选项，或者添加一个值为空字符串的新选项，然后将Category初始化为空字符串。如果有的话，它也会触发您的验证。

是新的选择

$scope.Category = "";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "", Name: "Please Select" });
$scope.ListOption.push({ Value: "0", Name: "Car" });
$scope.ListOption.push({ Value: "1", Name: "House" });

希望它有所帮助。

Answer 2

当ng-model中的变量值与现有<option>的任何值不匹配时，AngularJs倾向于这样做（生成额外的选项元素）。
您可以通过设置初始值（也是相同类型）来解决它，它是<option>元素中的一个值。
或者在其中添加一个<option>元素而不包含value和文本Select one。所以它会被选中。

function MyController($scope) {
$scope.Category = "1";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: 'Car' });
$scope.ListOption.push({ Value: "1", Name: 'House' });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyController">
<select class="form-control" id="Category" ng-model="Category"
  ng-options="item.Value as item.Name for item in ListOption">

</select>

{{Category}}
</div>

确保$scope.Category与Value变量中的ListOption的类型（不仅仅是值）相同，否则AngularJs会创建额外的选项并选择它。

Answer 3

如果您想提及第一个值为默认值，您可以在选项中使用ng-selected将0设置为默认值。下面提到的代码示例供您参考。

<select class="form-control" id="Category" ng-model="Category">

<option ng-repeat="option in ListOption" value="{{option.Value}}" ng-selected="option.Value == '0'">
 {{option.Name}}</option>

</select>

删除第一个值？对象：null？在选择选项Angularjs中

3 个答案: