AngularJS通过function()调用显示/隐藏

Question

AngularJS通过function()调用显示/隐藏

3

在一个返回布尔值的函数调用之后，是否有可能显示/隐藏一个元素？场景是当所有n个项目都具有"已同意"标志时，显示"已准备好"。如果没有，则显示其他内容。"已同意"标志的值会随着单选按钮的改变而改变。

$scope.data = [
    {
        title: "Agreement #1",
        agreed: false,
    },
    {
        title: "Agreement #2",
        agreed: false,
    },
];

$scope.ready = function()
{
    var go = true;
    angular.forEach($scope.data, function(item, key) {
        go &= item.agreed==true;
      });
    return go;
}

接着，调用：

<div ng-show="ready()">Go!</div>
<div ng-hide="ready()">Missing the points.</div>

这段代码存在问题：如果所有单选按钮都被选中，也就是说，所有同意标志的值都设置为true，那么ready()不会自动更新。

- Bimal Poudel

个人而言，我会将 ng-show =“！ready（）” 编码为 ng-hide =“ready（）”，而 &= 可能更有效率，但它不是那么易读。如果你使用 if （！item.agreed）返回false; ，然后在循环后返回 true ，这会怎样呢？这样更易读，也可能更有效率。它甚至可能解决你的问题。如果不行，请你转储 $scope.data 并发布一下吗？ - Mawg says reinstate Monica

1

感谢引用ng-show，ng-hide。我已经更新了问题。$scope.data转储是正确的，只要我进行修改。即它包含有效的true或false状态值。ready()设计为在所有item [i] .agreed设置为true时聚合。 - Bimal Poudel

我仍然不喜欢那个 go &= item.agreed==true;，因为我可能会担心运算符优先级。如果你不想按照我的建议重写它，那么至少要加上括号：go &= (item.agreed==true);或者go &= item.agreed;，因为你不需要显式地检查true。 - Mawg says reinstate Monica

我会在控制器中寻找单选框输入的变化，并在其变化时执行函数，该函数将设置一些scope.flag变量，并使用ng-if/ng-show/ng-hide显示具有条件的div，如果此标志为真。 - BT101

2个回答

1

您可以将“agreed”的布尔值绑定到单选按钮的ng-model上，并使用ng-value为每个协议设置true/false。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
    {
        title: "Agreement #1",
        agreed: false,
    },
    {
        title: "Agreement #2",
        agreed: false,
    }
]

$scope.ready = function()
{
    var go = true;
    angular.forEach($scope.data, function(item, key) {
        go &= item.agreed==true;
      });
    return go;
}
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div ng-show="ready()">Go!</div>
<div ng-show="!ready()">Missing the points.</div>
    <table>
        <tr>
            <th>Agreement </th>
            <th>Status</th>
        </tr>
        <tr ng-repeat="value in data">
            <td>{{value.title}}</td>
            <td>
                Yes <input type="radio" ng-model="value.agreed" ng-value="true" />
                No <input type="radio" ng-model="value.agreed" ng-value="false"  />
            </td>
        </tr>
    </table>
   
    
    <span>{{data}}</span>
</div>
</body>
</html>

- Vivz

1

诀窍似乎在于使用ng-value="true"和ng-value="false"进行数据绑定。它有效地工作。 - Bimal Poudel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hussain Mohd · Accepted Answer

我认为您错过了数据变量的方括号。

$scope.data = [
    {
        title: "Agreement #1",
        agreed: true,
    },
    {
        title: "Agreement #2",
        agreed: false,
    },
];

https://plnkr.co/edit/xWdro1SCUTeLbRVbEMWi?p=preview