Question

我希望获取列表中某个按钮的值。当用户单击它时，下面的按钮应显示所选按钮的名称。我正在使用AngularJS，我正在使用框架Angular Material，这是“md-”值的来源。

每次我尝试编写一个能够捕获值的函数时，我都会感到难以理解，而且我完全不确定如何使逻辑绑定数据并将其提供给它。

这个想法是按钮将捕获上述按钮的名称，并根据所选按钮运行不同的动作。

<md-menu>
        <md-menu-content>
          <md-menu-item>
            <md-button value="Group" ng-click="captureValue()"><p>Group</p></md-button>
          </md-menu-item>

          <md-menu-item>
            <md-button value="Merge" ng-click="captureValue()"><p>Merge</p></md-button>
          </md-menu-item>

          <md-menu-item>
            <md-button value="Hide" ng-click="captureValue()"><p>Hide</p></md-button>
          </md-menu-item>

        </md-menu-content>
</md-menu>

<!-- This button should display the name of one of the buttons above -->
<md-button>{{ Value of the selected button above should go here"</mdbutton>

Answer 1

您可以将某些内容（例如，按钮文字）传递到captureValue函数：

<md-menu-item>
  <md-button ng-click="captureValue('Group')"><p>Group</p></md-button>
</md-menu-item>

<md-menu-item>
  <md-button ng-click="captureValue('Merge')"><p>Merge</p></md-button>
</md-menu-item>

<md-menu-item>
  <md-button ng-click="captureValue('Hide')"><p>Hide</p></md-button>
</md-menu-item>

然后captureValue可以某种方式使用它：

function captureValue(text) {
  this.lastClickedButtonText = text;
}

显示它：

<md-button>{{ ctrlName.lastClickedButtonText }}</mdbutton>

这一切都假定您使用的是控制器绑定方法，而不是$scope方法。

如果你正在使用$scope，那就完全不同了：

$scope.captureValue = function(text) {
  $scope.lastClickedButtonText = text;
}

并显示它：

<md-button>{{ lastClickedButtonText }}</mdbutton>

或者，如果您想要更直接且captureValue没有额外的逻辑可以运行，您可以将其全部保留在视图中，因为ng-click的主体几乎可以任何单一的JS声明。

<md-button ng-click="lastClickedButtonText = 'Group'"><p>Group</p></md-button>

我在实践中意识到你不太可能只想捕获按钮的值，这只是一个示例，表明你可以在ng-click等角度指令中使用几乎任何JS语句。

Answer 2

您可以使用ng-click =＆＃34; captureValue（this）;＆＃34;

＆＃34;这＆＃34;作为参数，将为您的函数（captureValue）提供已单击的元素。然后得到你必须得到的东西并做你必须做的事。

将值的名称分配给按钮名称

2 个答案: