Angular Material: md-button ~ hoot 根据 NodeRed 上的输入更改按钮的文本
Angular Material: md-button ~ hoot change the text of the button based on input on NodeRed
在 NodeRed 中,我使用新的 UI_Dashboard 模板节点,它对按钮等使用正常的 Angular Material 符号,我有以下工作按钮:
<md-button
ng-style="{background: msg.payload=='0' ?'green':'red'}"
ng-click="msg.payload = (msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload: 'event,allsprinkleroff'})) "
> Button Name
但是,我希望 'Button Name' 根据传入的 msg.payload 值进行更改。现在有什么想法吗?我在这里的所有谷歌搜索和搜索都没有给我答案? (新手)
给你 - CodePen
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-button ng-style="{background: msg.payload=='0' ?'green':'red'}" ng-click="msg.payload =(msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload:'event,allsprinkleroff'})) ">Payload {{msg.payload}}</md-button>
<br>
<md-button ng-click="togglePayLoad()">Toggle Payload</md-button>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.msg = {
payload: 0
}
$scope.togglePayLoad = function () {
$scope.msg.payload = ($scope.msg.payload === 0) ? 1 : 0;
}
});
在 NodeRed 中,我使用新的 UI_Dashboard 模板节点,它对按钮等使用正常的 Angular Material 符号,我有以下工作按钮:
<md-button
ng-style="{background: msg.payload=='0' ?'green':'red'}"
ng-click="msg.payload = (msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload: 'event,allsprinkleroff'})) "
> Button Name
但是,我希望 'Button Name' 根据传入的 msg.payload 值进行更改。现在有什么想法吗?我在这里的所有谷歌搜索和搜索都没有给我答案? (新手)
给你 - CodePen
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-button ng-style="{background: msg.payload=='0' ?'green':'red'}" ng-click="msg.payload =(msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload:'event,allsprinkleroff'})) ">Payload {{msg.payload}}</md-button>
<br>
<md-button ng-click="togglePayLoad()">Toggle Payload</md-button>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.msg = {
payload: 0
}
$scope.togglePayLoad = function () {
$scope.msg.payload = ($scope.msg.payload === 0) ? 1 : 0;
}
});