AngularJS / Material:为什么不计算表达式?
AngularJS / Material: why the expression is not evaluated?
我不明白为什么表达式“{{isMultiple}}”没有在这段代码中求值:
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";
}
Plunker 上的完整代码:
https://plnkr.co/edit/a5yCLW?p=preview
在此示例中,下拉控件不应是多选的。
好吧,如果你能做到的话
多个="false"
那么你不会得到复选框,但它工作安静简单用户可以 select 正如预期的那样只有一个值。复选框意味着可以制造多于一个 selection。
无法将表达式传递给属性 multiple
、according to the documentation:
但是,解决此问题的一种方法是在代码中创建 md-select
- CodePen
标记
<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);
});
我不明白为什么表达式“{{isMultiple}}”没有在这段代码中求值:
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";
}
Plunker 上的完整代码: https://plnkr.co/edit/a5yCLW?p=preview
在此示例中,下拉控件不应是多选的。
好吧,如果你能做到的话
多个="false"
那么你不会得到复选框,但它工作安静简单用户可以 select 正如预期的那样只有一个值。复选框意味着可以制造多于一个 selection。
无法将表达式传递给属性 multiple
、according to the documentation:
但是,解决此问题的一种方法是在代码中创建 md-select
- CodePen
标记
<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);
});