AngularJS/Material:为什么不评估表达式? [英] AngularJS / Material: why the expression is not evaluated?

问题描述

我不明白为什么在这段代码中没有计算表达式{{isMultiple}}":

HTML:

<label>{{label}}</label><md-select ng-model="choice" multiple="{{isMultiple}}"><md-option value="1">选项1</md-option><md-option value="2">选项2</md-option><md-option value="3">选项3</md-option></md-选择></md-input-container>

JS:

angular.module('app', ['ngMaterial']).controller('AppCtrl', AppCtrl);功能 AppCtrl($scope) {$scope.isMultiple = false;$scope.choice = "";$scope.label = "MyLabel";}

Plunker 上的完整代码:

但是，解决此问题的一种方法是在代码中创建 md-select - CodePen

标记

<md-input-container id="myInputContainer" style="width: 30%;"><label>{{label}}</label></md-input-container>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog']).controller('AppCtrl', function($scope, $element, $compile) {var myInputContainer = angular.element($element[0].querySelector('#myInputContainer')),选择，mdSelectElement;$scope.options = [{值:1，标签:选项1"}，{值:2，标签:选项2"}，{值:3，标签:选项3"}]$scope.isMultiple = false;$scope.choice = "";$scope.label = "MyLabel";mdSelect = "<md-select ng-model='choice' multiple='" + $scope.isMultiple + "'>"+<md-option ng-repeat='option in options' value='{{option.value}}'>{{option.label}}</md-option>"+"</md-选择>";mdSelectElement = angular.element(mdSelect);myInputContainer.append(mdSelectElement);$compile(myInputContainer)($scope);});

I do not understand why the expression "{{isMultiple}}" is not evaluated in this code:

HTML:

<md-input-container style="width: 30%;">
   <label>{{label}}</label>
   <md-select ng-model="choice" multiple="{{isMultiple}}">
     <md-option value="1">Option 1</md-option>
     <md-option value="2">Option 2</md-option>
     <md-option value="3">Option 3</md-option>
   </md-select>
 </md-input-container>

JS:

angular.module('app', ['ngMaterial'])
    .controller('AppCtrl', AppCtrl);

function AppCtrl($scope) {

    $scope.isMultiple = false;
    $scope.choice = "";
    $scope.label = "MyLabel";
}

Full code on Plunker: https://plnkr.co/edit/a5yCLW?p=preview

The Dropdown control should NOT be multi-selectable in this example.

解决方案

It is not possible to pass an expression to the attribute multiple, according to the documentation:

However, one way around this is to create the md-select in the code - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container id="myInputContainer" style="width: 30%;">
   <label>{{label}}</label>
 </md-input-container>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])

.controller('AppCtrl', function($scope, $element, $compile) {
  var myInputContainer = angular.element($element[0].querySelector('#myInputContainer')),
      mdSelect,
      mdSelectElement;

  $scope.options = [
    {value: 1, label: "Option 1"},
    {value: 2, label: "Option 2"},
    {value: 3, label: "Option 3"}
  ]
  $scope.isMultiple = false;
  $scope.choice = "";
  $scope.label = "MyLabel";

  mdSelect = "<md-select ng-model='choice' multiple='" + $scope.isMultiple + "'>" +
    "<md-option ng-repeat='option in options' value='{{option.value}}'>{{option.label}}</md-option>" +
    "</md-select>";
  mdSelectElement = angular.element(mdSelect);
  myInputContainer.append(mdSelectElement);
  $compile(myInputContainer)($scope);
});

这篇关于AngularJS/Material:为什么不评估表达式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！