AngularJS / Material:为什么不计算表达式?

时间:2021-12-10 05:27:09

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

我不理解为什么在此代码中没有计算“{{{isMultiple}”表达式:

HTML:

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:

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

Full code on Plunker: https://plnkr.co/edit/a5yclw?

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

在本例中,下拉控件不应该是多选择的。

2 个解决方案

#1


2  

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

根据文件,不可能将表达式传递给属性倍数:

AngularJS / Material:为什么不计算表达式?

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

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

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

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);
});

#2


0  

well if you could do

如果你能做到的话

multiple="false"

多个= " false "

then you won't get checkboxes but it work quiet simple user can select only one value as expected. checkbox means there could be more then one selection could be made.

然后您不会得到复选框,但它工作得很好,简单的用户只能按预期选择一个值。复选框意味着可以进行更多的选择。

#1


2  

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

根据文件,不可能将表达式传递给属性倍数:

AngularJS / Material:为什么不计算表达式?

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

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

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

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);
});

#2


0  

well if you could do

如果你能做到的话

multiple="false"

多个= " false "

then you won't get checkboxes but it work quiet simple user can select only one value as expected. checkbox means there could be more then one selection could be made.

然后您不会得到复选框,但它工作得很好,简单的用户只能按预期选择一个值。复选框意味着可以进行更多的选择。