html - 当点击按钮值在 Angular js中不更新时

Question

此 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值

Answer 1

尽管您的思路是正确的，但您在语法上有点困惑。 :) 这是可以的，也是学习中必不可少的一步。

在您的代码中，您首先将 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>