Question

是否可以在返回布尔值的函数调用后显示/隐藏元素？情景是，显示＆＃34; Ready＆＃34;当所有的n项都有＆＃34;同意＆＃34;旗。如果没有，请展示其他内容。约定标志的值通过单选按钮更改。

$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（）不会自动更新。

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。

＆＃13;

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;
}
});

＆＃13;

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

＆＃13;

AngularJS使用function（）调用显示/隐藏

2 个答案: