角度材质设置md-select所选值

我试图设置md-select的选定值，但是我遇到了问题。角度材质设置md-select所选值

当我打开页面时，我需要查看股票的预设分类，但我看不到它。相反，它们都是同一类别。我还当我选择另一个

我采用了棱角分明1.5.5 &角材料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" 
    }]; 

    } 
]);

来源

2017-02-09 salep

我被你的再利用一些像“股票”和“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

来源

2017-02-10 05:29:40

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

来源

2017-02-09 15:43:37

的重复数据删除技术问题已经解决了感谢您的建议，但现在同样的类别设置为所有这些。当我选择另一个类别时，我也无法更改类别。 – salep

@salep检查更新请致谢:) –

感谢分叉笔，这是非常接近我想要实现的。如何选择预设类别以便我可以看到其预定义的值？例如，AAPL的是3（高音量），SKYS的是1（易失）等:) – salep

角度材质设置md-select所选值

回答

相关问题