删除第一个值 ?对象:空 ?在选择选项Angularjs中



>我在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>

我对这个问题很头疼。期待有人以另一种方式帮助我

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

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 将创建额外的选项并选择它。

第一个选项

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

生成是因为未定义 ngModel 值类别,选择将与 Caegory 的值与其选项匹配。由于没有未定义任何选项,因此它本身会添加一个虚拟选项。

要解决此问题,yyu可以将ngModel值类别自动初始化为第一个选项,或者添加一个值为空白字符串的新选项,然后将类别初始化为空白字符串。它还将触发您的验证(如果有(。新选项将是

$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" });

希望对您有所帮助。

当您想提及第一个值作为默认值时,您可以使用 ng-selected in 选项将 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>

最新更新