AngularJS在加载时选择一个空选项

Question

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

当我运行它时，它将生成选项value =“？” 并始终选择选项value =“？” 我知道选项value =“？” 当angular不能从列表中找到正确的值时生成。 但是它在列表中确实有一个与绑定模型值和类型（整数）匹配的正确值。

 <option selected="selected" value="?"></option> <option value="1" label="Aliexpress">Aliexpress</option> <option value="2" label="DHGate">DHGate</option></select>

有人可以帮忙为什么选择value =“？” 总是？

Answer 1

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

Answer 2

ng-options的语法可能会很混乱，但是您遇到的情况是您实际上是将整个对象输出到ng-model ，但是ng-model的设置就像只输出一个属性一样。

进一步分解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.

有一个as子句，允许您输出特定的属性，但是通常没有必要。 另外，“ select as和“ track by并非旨在一起使用。 https://code.angularjs.org/1.4.7/docs/api/ng/directive/ngOptions

因此，基于此，您实际上要设置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

AngularJS在加载时选择一个空选项

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-19 04:04:44

解决方案2
0 2017-01-19 04:18:47

AngularJS在加载时选择一个空选项

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-19 04:04:44

解决方案2 0 2017-01-19 04:18:47

解决方案1
1 已采纳 2017-01-19 04:04:44

解决方案2
0 2017-01-19 04:18:47