Question

我是angularjs的新手，我真的需要帮助解决这个问题。

＆＃13;

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"}]}

＆＃13;

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

＆＃13;

当我运行它时，它会生成选项值=＆＃34;？＆＃34;并始终选择选项值=＆＃34;？＆＃34;我知道期权价值=＆＃34;？＆＃34;当角度无法从列表中找到正确的值时生成。但它在列表中确实有一个与绑定模型值和类型（整数）匹配的正确值。

＆＃13;

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

＆＃13;

有人可以帮助为什么选择值=＆＃34;？＆＃34;总是？

Answer 1

在vendor.vendorNo as vendor.vendorName

中设置ng-options

  <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，但您的{设置{1}}，就好像您只输出一个属性一样。

再分解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并非旨在一起使用。 https://code.angularjs.org/1.4.7/docs/api/ng/directive/ngOptions

因此，基于此，您实际上想要设置track by

，而不是设置ng-model="item.vendorNo"

＆＃13;

ng-model="item"

＆＃13;

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

＆＃13;

http://plnkr.co/edit/zQPryQvH2zF2YUFFXpU8?p=preview

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

2 个答案: