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