角度材料設定md選択値選択

md-selectの選択値を設定しようとしていますが、問題が発生しています。角度材料設定md選択値選択

私がページを開くと、在庫のプリセットカテゴリを確認する必要がありますが、表示されません。代わりに、すべて同じカテゴリが設定されます。私は@Pankajパーカーに1.1.0

おかげで、私は近くになった角度1.5.5 &角度素材を使用している別の1

を選択したときに、私はまた、カテゴリを変更することはできません。

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

md-option要素からselected="selected"属性を削除します。すべての要素を選択したものとして表示しています。

<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 checkが更新されました。ありがとう:) –

フォークしたペンをありがとう、私は達成しようとしているものに非常に近いです。あらかじめ定義されたカテゴリを選択して、あらかじめ定義された値がわかるようにするにはどうすればよいですか？たとえば、AAPLは3（High Volume）、SKYSは1（Volatile）などです。 – salep

角度材料設定md選択値選択

答えて

関連する問題