html - 当单击按钮值未在Angular JS中更新时

此html代码：

<md-button class="md-primary " ng-click="setDevice('phone')">Phone
        </md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">
           Tablet
        </md-button>

<div class="area-{{setDevice}}">
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>

首次单击电话或平板电脑按钮时更新setDevice值

$scope.setDevice = "";
$scope.setDevice = function(setDevice){
            $scope.setDevice = setDevice;
        }

问题是（单击手机时），单击平板电脑按钮时未更新setDevice值

当单击两个按钮时，希望更新$scope.setDevice值

最佳答案

尽管您的思路是正确的，但您在语法上却有些混乱。 :)
没关系，这是学习中必不可少的步骤。

在代码中，首先将setDevice声明为字符串，然后声明为函数。因为最后一个赋值是一个函数，所以$scope.setDevice不再是字符串，而是一个函数。

将变量的名称更改为其他名称，它将正常工作。

$scope.currentDevice = "";
$scope.setDevice = function(setDevice){
    $scope.currentDevice = setDevice;
}

在你的HTML

<md-button class="md-primary " ng-click="setDevice('phone')">Phone</md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">Tablet</md-button>

<div class="area-{{currentDevice}}"> <!-- THIS NEEDS TO BE UPDATED AS WELL -->
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>