Question

我使用Angular文档中的一个示例：https：//docs.angularjs.org/api/ng/directive/select ＆＃34;使用ngValue将模型绑定到一个对象数组＆＃34;部分。 index.html的：＆lt;！doctype html＆gt; ＆lt; html lang =＆＃34; en＆＃34;＆gt; ＆LT; HEAD＆GT; ＆lt; meta charset =＆＃34; UTF-8＆＃34;＆gt; ＆lt; title＆gt;示例 - example-select-ngvalue-production＆lt; / title＆gt; ＆lt; script src =＆＃34; // ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> ＆lt; script src =＆＃34; app.js＆＃34;＆gt;＆lt; / script＆gt; ＆LT; /头＆GT; ＆lt; body ng-app =＆＃34; ngvalueSelect＆＃34;＆gt; ＆lt; div ng-controller =＆＃34; ExampleController＆＃34;＆gt; ＆lt; form name =＆＃34; myForm＆＃34;＆gt; ＆lt; label for =＆＃34; ngvalueselect＆＃34;＆gt; ngvalue select：＆lt; / label＆gt; ＆lt; select size =＆＃34; 6＆＃34;名称=＆＃34; ngvalueselect＆＃34; NG-模型=＆＃34; data.model＆＃34;多个＆GT; ＆lt; option ng-repeat =＆＃34; data.availableOptions＆＃34;中的选项; NG-值=＆＃34; option.value＆＃34;＆GT; {{option.name}}＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; /形式＆GT; ＆LT; HR＆GT; ＆lt; pre＆gt; model = {{data.model | JSON}}＆LT; /预＆GT;＆LT峰; br /＆GT; ＆LT; / DIV＆GT; ＆LT; /体＆GT; ＆LT; / HTML＆GT; app.js：（函数（有角度）{ ＆＃39;使用严格的＆＃39 ;; angular.module（＆＃39; ngvalueSelect＆＃39;，[]） .controller（＆＃39; ExampleController＆＃39;，[＆＃39; $ scope＆＃39;，function（$ scope）{ $ scope.data = { 型号：null，可用选项： [ {value：＆＃39; myString＆＃39;，name：＆＃39; string＆＃39;}， {值：1，名称：＆＃39;整数＆＃39;}， {value：true，name：＆＃39; boolean＆＃39;}， {value：null，name：＆＃39; null＆＃39;}， {value：{prop：＆＃39; value＆＃39;}，name：＆＃39; object＆＃39;}， {value：[＆＃39; a＆＃39;]，名称：＆＃39;数组＆＃39;} ] }; }]）; }）（window.angular）; Plunker：https：//plnkr.co/edit/aHgqeK1pQHS5zfiIjyZv？p = preview 问题：每个＆lt;选项＆gt;代表对象。我选择了一个项目＆＃34; [object Object]＆＃34;分配给＆lt; select＆gt;的ng-model而不是对象。 Angular建议使用ng-options而不是带有选项的转发器，但我需要为每个选项使用一些额外的逻辑，例如ng-style（每个选项都不同）。问题是：如何在＆lt; select＆gt;的ng-model中将对象作为Object而不是String传递。当用户从select中选择一个选项时。

Answer 1

为什么不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

Answer 2

我相信你的选择应该是这样的：

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

所以不应该有任何单独的选项

Answer 3

$（本）.find（＆＃34;：选择＆＃34）。数据（＆＃34;值＆＃34）

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

＆＃34; [对象]＆＃34;当我选择对象

3 个答案: