Question

大家好，我正在努力学习angularjs。

我做了这个选择：

<label class="md-title" for="yachtId">Choose:</label>
 <select name="yachtId" id="yachtId" ng-options="selectedYacht.title for 
    selectedYacht in yachtIds.availableOptions track by selectedYacht.id" 
    ng-model="yachtIds.selectedOption" >
 </select>

我以json格式获取数据，它是这样的：

$scope.yachtIds = {
availableOptions":[
     {"id":"2","title":"Name 1","maxCapacity":"5"},
     {"id":"7","title":"Name 2","maxCapacity":"8"}
 ]}

使用此行我得到用户选择的内容：

  selectedYacht = {{yachtIds.selectedOption}}

输出为：selectedYacht = {＆＃34; id＆＃34;：＆＃34; 7＆＃34;，＆＃34; title＆＃34;：＆＃34; Name 2＆＃34;，＆＃ 34; MAXCAPACITY＆＃34;：＆＃34; 8＆＃34;}

问题是，我正在尝试使用md-select进行相同的选择，但我无法弄清楚如何从用户的选择中打印所有内容。使用下面的代码，我只得到名称。

<md-input-container flex="100">
  <label class="md-title" for="yachtId">Desired yacht:</label>
  <md-select ng-model="yachtIds.selectedOption"  name="yachtId" id="yachtId">
    <md-option ng-value="t.title" data-ng-repeat="t in yachtIds.availableOptions">
    {{ t.title }}
    </md-option>
  </md-select>
</md-input-container>

所以，输出是这样的：selectedYacht = Name 2，但我希望它像前一个一样（selectedYacht = {＆＃34; id＆＃34;：＆＃34; 7＆＃34;，＆＃34 ;标题＆＃34;：＆＃34;名称2＆＃34;，＆＃34; maxCapacity＆＃34;：＆＃34; 8＆＃34;}）。

有任何帮助吗？提前谢谢。

Answer 1

将您的ng-value属性更改为t而不是t.title，并添加trackBy模型选项：

<md-select ng-model="yachtIds.selectedOption" ng-model-options="{trackBy: '$value.id'}" name="yachtId" id="yachtId">
    <md-option ng-value="t" data-ng-repeat="t in yachtIds.availableOptions">
        {{ t.title }}
    </md-option>
</md-select>

Answer 2

我不确定你是否期望相同，但我相信我会很有帮助

<ul>
<li ng-repeat="x in records">{{x.id}}-{{x.title}}-{{x.maxCapacity}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
     {"id":"2","title":"Name 1","maxCapacity":"5"},
     {"id":"7","title":"Name 2","maxCapacity":"8"}
  ];
});
</script>

从具有md-select angular js的选项打印所有内容

2 个答案: