“[对象对象]“;而不是Object被传递给ng-model用于<select>当我用Object选择一个选项时

"[object Object]" instead of Object is passed to ng-model for <select> when I select an option with Object

本文关键字：Object 对象 选择 一个 选项 用于 ng-model select      更新时间：2023-09-26

我使用Angular文档中的一个例子:https://docs.angularjs.org/api/ng/directive/select
"使用ngValue将模型绑定到一个对象数组"一节。

index . html: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-ngvalue-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>

</head>
<body ng-app="ngvalueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="ngvalueselect"> ngvalue select: </label>
    <select size="6" name="ngvalueselect" ng-model="data.model" multiple>
      <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <pre>model = {{data.model | json}}</pre><br/>
</div>
</body>
</html>

app.js: 

(function(angular) {
  'use strict';
angular.module('ngvalueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
          {value: 'myString', name: 'string'},
          {value: 1, name: 'integer'},
          {value: true, name: 'boolean'},
          {value: null, name: 'null'},
          {value: {prop: 'value'}, name: 'object'},
          {value: ['a'], name: 'array'}
     ]
    };
 }]);
})(window.angular);

砰砰作响:https://plnkr.co/edit/aHgqeK1pQHS5zfiIjyZv?p=preview

问题:每个<option>都代表对象。我选择一个项目，"[object object]"被分配给<select>的ng-model，而不是object。

Angular建议使用ng-options而不是带选项的repeater，但我需要为每个选项使用一些额外的逻辑，比如ng-style(每个选项都不同)。

问题是:当用户从select中选择一个选项时，如何在<select>的ng-model中将对象作为object而不是String传递

为什么不是ng-options ?

<select size="6" name="ngvalueselect" ng-model="data.model" ng-options="item.value as item.name for item in data.availableOptions" multiple></select>

工作柱塞https://plnkr.co/edit/zVzTI6sR6LywC9vcZRkn

我认为你的选择应该是这样的:

<select size="6" name="ngvalueselect" ng-model="data.model" ng-options="option.value as option.name for option in data.availableOptions" multiple>
所以不应该有任何单独的选项项

美元(这);(":选择"). data("价值")

<form name="myForm">
    <label for="ngvalueselect"> ngvalue select: </label>
    <select size="6" name="ngvalueselect" ng-model="data.model" multiple>
      <option ng-repeat="option in data.availableOptions" data-option="{{option.value}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <pre>model = {{data.model | json}}</pre><br/>
</div>
</body>
</html>

和jquery使用:

$(document).on("change","select",function(){
    var objectOrStringReturend = $(this).find(":selected").data("value");
});
相关文章：