[英]AngularJS select an empty option when loaded
I'm new to angularjs and I really need help with this issue. 我是angularjs的新手,我确实需要此问题的帮助。
csApp.controller('expensesCtrl', function ($scope, $http) { $scope.getExpenses = function () { $http.post('/Home/ExpensesTableList').then(function (response) { $scope.vendorList = response.data.csVendors; $scope.list = response.data.csExpenses; }); }; $scope.getExpenses(); }); // returned json {"csExpenses":[{"vendorNo":1}], "csVendors":[{"vendorNo":1,"vendorName":"Aliexpress"},{"vendorNo":2,"vendorName":"DHGate"}]}
<tr ng-repeat="item in list" ng-cloak > <td> <select ng-model="item.vendorNo" ng-options="vendor.vendorName for vendor in vendorList track by vendor.vendorNo"></select> </td> </tr>
When I run this, it generates option value="?" 当我运行它时,它将生成选项value =“?” and always selects the option value="?" 并始终选择选项value =“?” I know option value="?" 我知道选项value =“?” is generated when angular cannot find the right value from the list. 当angular不能从列表中找到正确的值时生成。 But it does have a right value in the list which matches with the binding model value and type (integer). 但是它在列表中确实有一个与绑定模型值和类型(整数)匹配的正确值。
<option selected="selected" value="?"></option> <option value="1" label="Aliexpress">Aliexpress</option> <option value="2" label="DHGate">DHGate</option></select>
Can someone please help why it is selecting the value="?" 有人可以帮忙为什么选择value =“?” always? 总是?
Set vendor.vendorNo as vendor.vendorName
inside ng-options
在ng-options
vendor.vendorNo as vendor.vendorName
设置vendor.vendorNo as vendor.vendorName
<td>
<select ng-model="item.vendorNo" ng-options="vendor.vendorNo as vendor.vendorName for vendor in vendorList" ng-selected="true"></select>{{item.vendorNo}}
</td>
var csApp = angular.module("app", []); csApp.controller('expensesCtrl', function($scope, $http) { $scope.getExpenses = function() { //$http.post('/Home/ExpensesTableList').then(function (response) { var response = { "csExpenses": [{ "vendorNo": 1 }], "csVendors": [{ "vendorNo": 1, "vendorName": "Aliexpress" }, { "vendorNo": 2, "vendorName": "DHGate" }] }; $scope.vendorList = response.csVendors; $scope.list = response.csExpenses; //}); }; $scope.getExpenses(); }); // returned json
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="expensesCtrl"> <table> <tr ng-repeat="item in list" ng-cloak> <td> <select ng-model="item.vendorNo" ng-options="vendor.vendorNo as vendor.vendorName for vendor in vendorList" ng-selected="true"></select>{{item.vendorNo}} </td> </tr> </table> </div>
The syntax of ng-options
can be quite confusing, but what is happening in your case is that you are actually outputting the entire object to the ng-model
, but your ng-model
is set up as if you are only outputting one property. ng-options
的语法可能会很混乱,但是您遇到的情况是您实际上是将整个对象输出到ng-model
,但是ng-model
的设置就像只输出一个属性一样。
Breaking down the ng-options
a bit more: 进一步分解ng-options
:
vendor.vendorname //sets the text to display in the list
for vendor // sets what gets output for each row
in vendorList // sets what gets iterated
track by vendor.vendorNo //sets the order the list is displayed.
There is an as
clause that allows you to output a specific property, but it is generally not necessary. 有一个as
子句,允许您输出特定的属性,但是通常没有必要。 Also, select as
and track by
are not designed to be used together. 另外,“ select as
和“ track by
并非旨在一起使用。 https://code.angularjs.org/1.4.7/docs/api/ng/directive/ngOptions https://code.angularjs.org/1.4.7/docs/api/ng/directive/ngOptions
So based on this, instead of setting ng-model="item.vendorNo"
, you actually want to set ng-model="item"
因此,基于此,您实际上要设置ng-model="item"
,而不是设置ng-model="item.vendorNo"
ng-model="item"
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { var json = { "csExpenses": [{ "vendorNo": 1 }], "csVendors": [{ "vendorNo": 1, "vendorName": "Aliexpress" }, { "vendorNo": 2, "vendorName": "DHGate" }] } $scope.vendorList = json.csVendors; $scope.list = json.csExpenses; $scope.change = function() { console.log($scope.list); } });
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <table> <tr ng-repeat="item in list" ng-cloak> <td> <select ng-model="item" ng-change="change()" ng-options="vendor.vendorName for vendor in vendorList track by vendor.vendorNo"></select> </td> </tr> </table> </body> </html>
http://plnkr.co/edit/zQPryQvH2zF2YUFFXpU8?p=preview http://plnkr.co/edit/zQPryQvH2zF2YUFFXpU8?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.