Md-select& Md选项使用多个交换值AngularJS Angular Material

时间:2016-10-24 18:39:01

标签: angularjs angular-material material

问候我使用md-select和md-options有点新,并且遇到了一些障碍。我需要根据是否选择了md-option中的项目来更改值,并将其设置为true,如果不是则将其返回false。但是,我有点迷失在如何做到这一点,并可能使用一些方向。目前,我正在尝试运行一个更改此功能的函数,但我似乎无法理解如何传递正确的对象。

我认为我在md-options和md-select逻辑上遗漏了一些东西。感谢任何帮助。

    //Array of objects in ng-repeat
var vm= $scope;
  vm.metricsArr = [
    {id: 0, name:"Aircraft Commander", valId:false},
    {id: 1, name:"Flight Hours", valId: false},
    {id: 2, name:"# of Sorties", valId: false}];

//Change value
vm.changeMetrics = function(passedInParam){
//nothing in here since I cant get it to work currently
};

//HTML where i pass object in to change value
 <md-select multiple ng-model="i" ng-model-options= "{trackBy: '$value.id'}" ng-change="changeMetricVal(i);">
                <md-option ng-value="i" ng-repeat="i in metricsArr">
                  {{i.name}}
                </md-option>
              </md-select>

1 个答案:

答案 0 :(得分:1)

出于某些原因ng-change没有被调用(我似乎记得在使用md-select之前遇到此问题)。您可以使用$scope.$watch - CodePen

标记

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <md-select multiple ng-model="i" ng-model-options= "{trackBy: '$value.id'}" aria-label="Select">
    <md-option ng-value="i" ng-repeat="i in vm.metricsArr">
        {{i.name}}
    </md-option>
  </md-select>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function($scope) {
  var vm = this;
  vm.metricsArr = [
    {id: 0, name:"Aircraft Commander", valId:false},
    {id: 1, name:"Flight Hours", valId: false},
    {id: 2, name:"# of Sorties", valId: false}];

  $scope.$watch("i", function (newValue) {
    console.log(newValue);
  });
});