AngularJS show/hide 调用 function()

Question

是否可以在 returns 一个布尔值的函数调用后 show/hide 一个元素？场景是，当所有 n 项都有一个 "agreed" 标志时显示 "Ready"。如果没有，请显示其他内容。使用单选按钮更改同意标志的值。

$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>

此代码有问题：如果选中所有单选按钮，即。同意标志的所有值都设置为真，ready() 不会自动更新。

Answer 1

我想你错过了数据变量方括号

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

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

Answer 2

您可以将同意的布尔值绑定到单选按钮的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>

AngularJS show/hide 调用 function()

AngularJS show/hide with a function() call

angularjs

angularjs-scope