Angular，函数返回 true，但 ng-show 不起作用答案

【问题标题】：Angular, function return true but ng-show won't workAngular，函数返回 true，但 ng-show 不起作用
【发布时间】：2016-10-12 22:03:07
【问题描述】：

如果我点击一个链接，showOrHide 函数将返回 true。

我用 alert 和 console.log 函数测试了这段代码，它是有效的，但是如果我想在 ng-show 或 ng-hide 指令中测试这段代码，它就不起作用。我无法理解这个问题。

Sum: 函数返回 false，如果我点击某个链接返回 true 但是真假在ng-show里是不行的。

angular.js 文件

$scope.showOrHide = function (value) {
        if (typeof value !== 'undefined')
        {
            return alert(true);
            //console.log("true");
            //return true;
        }else {
            return alert(false);
            //console.log("false");
            //return false;
        }
    };
    $scope.projectId = $stateParams.projectId;
    $scope.showOrHide($stateParams.projectId);

html 文件

<tr ng-repeat="n in data.projects track by $index"
    ng-href="@{{n.id}}"
    ui-sref="goTo({ projectId: n.id })">
    <td>@{{n.project_code}}</td>
    <td>@{{n.project_name}}</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">@{{n.status}}</td>
    <td ng-show="showOrHide">test</td>
</tr>

【问题讨论】：

标签： javascript angularjs angularjs-directive ng-show

【解决方案1】：

你ng-show是基于一个函数而不是一个变量，所以你需要把它写成一个函数。

HTML：

<td ng-show="showOrHide('undefined')">test</td>

JS：

$scope.showOrHide = function (value) {
        if (typeof value !== 'undefined')
            return true;
        else 
            return false;

    };

【讨论】：

它没有显示任何数据，但我单击一个链接更改返回值但它没有改变。我不明白为什么会这样

【解决方案2】：

如果我理解您要实现的目标（仅在 $stateParams.projectId 存在时显示元素），您可以使用您已经设置的变量，所以 删除函数 并使用以下：

控制器：

app.controller('myController', function( $scope, $stateParams) {

  // other code here...

  $scope.projectId = $stateParams.projectId || false;
});

查看：

<tr ng-repeat="n in data.projects track by $index"
    ng-href="@{{n.id}}"
    ui-sref="goTo({ projectId: n.id })">
    <td>@{{n.project_code}}</td>
    <td>@{{n.project_name}}</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">@{{n.status}}</td>
    <td ng-show="projectId">test</td>
</tr>

【讨论】：

【解决方案3】：

我放弃了所有解决方案，因为这些都不起作用，所以我没有修改我的代码。我都改了。

这是解决方案。

JS 文件

$scope.checkThis = true;

$scope.isShow = function (number) {
    return number;
};
$scope.toFalse = function () {
    $scope.checkThis = false;
};
$scope.toTrue = function () {
    $scope.checkThis = true;
};

HTML 文件

<tr ng-repeat="n in data.projects track by $index"
    ng-href="@{{n.id}}"
    ui-sref="goTo({ projectId: n.id })">
    <td>@{{n.project_code}}</td>
    <td>@{{n.project_name}}</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">will add</td>
    <td class="text-primary">@{{n.status}}</td>
    <td class="text-primary" ng-click="toFalse()"
                        ng-show="isShow(checkThis)">test</td>
                    </tr>

我认为这很简单。反过来我浪费了 3 个小时。

【讨论】：

【解决方案4】：

创建结果变量，如：

$scope.toShowOrToHide = $scope.showOrHide($stateParams.projectId);

和 HTML：

<td ng-show="toShowOrToHide">test</td>

并且 JS 没有警报就返回：

$scope.showOrHide = function (value) {
    return (typeof value !== 'undefined');
};

已编辑：

$scope.toShowOrToHide = function() {
    return $scope.showOrHide($stateParams.projectId);
);

还有 HTML：

<td ng-show="toShowOrToHide()">test</td>

你可能已经决定了适合你的东西....

【讨论】：

这不好。您希望在每个摘要中检查 ng-show（或者您不应该使用 ng-show）当 $stateParams.projectId 更改时，此示例不会显示元素。

【解决方案5】：

第一

$scope.stateParams = $stateParams;

然后

ng-show="stateParams.projectId"

当参数改变时，不需要函数并且值会自动更新。

【讨论】：