[英]Remove first value ? object:null ? in select option Angularjs
I'm having problems with select option in Angularjs This is code in file js 我在Angularjs中使用select选项时遇到问题这是文件js中的代码
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: Car });
$scope.ListOption.push({ Value: "1", Name: House });
Here's what the code HTML looks like 这是HTML代码的样子
<select class="form-control" id="Category" ng-model="Category">
<option ng-repeat="option in ListOption" value="{{option.Value}}">
{{option.Name}}</option>
</select>
The generated html is 生成的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>
I have quite a headache on this issue. 在这个问题上我很头疼。 Looking forward to having someone help me the other way
期待有人帮助我
The first option 第一种选择
<option value="? object:null ?"></option>
is generated because the ngModel value Category is not defined and select will match the value of Caegory with its options. 因为未定义ngModel值Category而选择,所以将生成Caegory的值及其选项。 Since no option is undefined, it adds a dummy option itself.
由于没有选项是未定义的,因此它本身会添加一个虚拟选项。
To solve this yyu can initialize the ngModel value Category to the first option automatically or add a new option with value as blank string and then initialize Category to blank string. 为了解决这个问题,yyu可以自动将ngModel值Category初始化为第一个选项,或者添加一个值为空白字符串的新选项,然后将Category初始化为空白字符串。 It will also trigger your validation if any.
如果有的话,它也会触发您的验证。 New options would be
新的选择是
$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" });
Hope it helps. 希望能帮助到你。
AngularJs tend to do this (generate extra option elment) when the value of the variable in ng-model
doesn't match any of the values of the existing <option>
. 当
ng-model
中的变量值与现有<option>
任何值都不匹配时,AngularJs倾向于这样做(生成额外的选项元素)。
You can solve it by setting an initial value (of the same type also), and it's one of the values in your <option>
elements . 您可以通过设置初始值(也为相同类型)来解决它,它是
<option>
元素中的值之一。
Or add one <option>
element without value
and with text Select one
inside it. 或添加一个不带
value
且带有文本的<option>
元素在其中Select one
。 so it'll be selected. 因此将其选中。
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>
Make sure $scope.Category
is the same type (not only value) as Value
in ListOption
variable, otherwise AngularJs will create extra option and select it. 确保
$scope.Category
与ListOption
变量中的Value
具有相同的类型(不仅是value),否则AngularJs将创建额外的选项并选择它。
As you wanted to mention the first value as default you can use ng-selected in option to set 0 as default. 正如您要提到的第一个值作为默认值一样,您可以使用ng-selected in选项将0设置为默认值。 Below mentioned code sample for your reference.
下面提到的代码示例供您参考。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.