Question

我正在尝试设置md-select的选定值，但我遇到了问题。

当我打开页面时，我需要查看股票的预设类别，但我看不到它。相反，为所有这些类别设置了相同的类别。当我选择另一个

时，我也无法更改类别

我正在使用Angular 1.5.5＆amp;角度材料1.1.0

感谢@Pankaj Parkar，我离得更近了。

Codepen：http://codepen.io/anon/pen/WRayNP?editors=1010

HTML

<html lang="en">

<head>
  <title>Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <link rel="stylesheet" href="stylesheets/index.css">
  <link rel="stylesheet" href="stylesheets/liste-app.css">
</head>

<body ng-app="ListApp" ng-controller="ListAppController">
  <div id="main">

    <md-toolbar class="md-theme-light">
      <h2 class="md-toolbar-tools">
      <span>9 Feb 2017</span>
    </h2>
    </md-toolbar>

    <div layout="row" flex>

      <div flex="100" layout-padding>
        <div layout="row" flex>
          <md-toolbar class="md-theme-light green">
            <h5 class="md-toolbar-tools">
            <span class="align">Stocks & Categories</span>
          </h5>
          </md-toolbar>
        </div>
        <div layout="column" flex="50">
          <md-list-item id="{{stock.stock}}" layout="row" ng-repeat="stock in stocks">
            <div flex="20">{{stock.stock}}</div>
            <div flex="70">
              <md-input-container>
                <label>Category</label>
                <md-select ng-model="stock.someOtherVal" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
                  <md-option ng-repeat="category in categories" ng-value="category">{{category.value}}
                  </md-option>
                </md-select>
              </md-input-container>
            </div>

          </md-list-item>
        </div>
      </div>
    </div>
  </div>
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script src="javascripts/list-app.js"></script>

  <script>
  </script>

</body>

</html>

的JavaScript

angular.module('ListApp', ['ngMaterial', 'ngAnimate']);

angular.module('ListApp').controller("ListAppController", [
  "$scope",
  "$http",
  "$filter",
  "$timeout",
  function($scope, $http, $filter, $timeout) {

    $scope.stocks = [];

    $scope.categories = [{
      id: 1,
      value: "Volatile"
    }, {
      id: 2,
      value: "Normal"
    }, {
      id: 3,
      value: "High Volume"
    }];

    /*$http.get('http://localhost/liststocks').then(function(response) {
      $scope.stocks = response.data;
    });*/

    // $http.get mock is below, I use $http.get but this is codepen, so...

    // id = STOCK ID
    // category = CATEGORY ID
    $scope.stocks = [{
      "id": 1,
      "category": 3,
      "stock": "AAPL"
    }, {
      "id": 2,
      "category": 3,
      "stock": "TSLA"
    }, {
      "id": 3,
      "category": 1,
      "stock" : "SKYS"
    }];

  }
]);

Answer 1

从selected="selected"元素中删除md-option属性。它导致将所有元素显示为已选中。

<div layout="column" flex="50">
  <md-list-item id="{{stock.stock}}" layout="row" ng-repeat="stock in stocks">
    <div flex="20">{{stock.stock}}</div>
    <div flex="70">
      <md-input-container>
        <label>Category</label>
        <md-select ng-model="stock.someOtherVal" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
          <md-option ng-repeat="category in categories" ng-value="category">{{category.value}}
          </md-option>
        </md-select>
      </md-input-container>
    </div>

  </md-list-item>
</div>

Forked Pen

Answer 2

我对您重复使用某些属性/变量名称（如“stock”和“id”）感到困惑，我相信它们会导致您的一些问题，因此我重命名了它们。然后我更改了md-select上的ng-model以指向categoryId属性。之后我删除了md-select上的“ng-model-options”，现在一切都很好。

使用Javascript：

$scope.stocks = [{
  "stockId": 1,
  "categoryId": 3,
  "stockTicker": "AAPL"
}, {
  "stockId": 2,
  "categoryId": 3,
  "stockTicker": "TSLA"
}, {
  "stockId": 3,
  "categoryId": 1,
  "stockTicker" : "SKYS"
}];

HTML：

    <md-list-item id="{{stock.stockTicker}}" layout="row" ng-repeat="stock in stocks">
        <div flex="20">{{stock.stockTicker}}</div>
        <div flex="70">
          <md-input-container>
            <label>Category</label>
            <md-select ng-model="stock.categoryId" style="min-width: 200px;">
              <md-option ng-repeat="category in categories" ng-value="category.id">{{category.value}}
              </md-option>
            </md-select>
          </md-input-container>
        </div>
      </md-list-item>

这是Forked pen

角度材质设置md-选择选定的值

2 个答案: