Question

我有以下代码：

<div class="row">
    <div ng-repeat="stat in stats"> 
        <div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">
            <div class="card card-stats">
                <div class="card-header" data-background-color="orange">
                    <i class="material-icons">content_copy</i>
                </div>
                <div class="card-content">
                    <p class="category">{{stat.market}} {{stat.line}} </p>
                    <h3 class="title">{{stat.considered}}
                        <small>Rec</small>
                    </h3>
                </div>
                <div class="card-footer">
                    <div class="stats">
                        <i class="material-icons">date_range</i> {{stat.updated_at}} 
                </div>
            </div>
        </div>
    </div>
</div>
<div ng-if="hideShow">
    test
    <div ng-repeat="chart in charts">
        {{chart}}
        {{chart.data.jobId}}
        {{chart.jobId}} {{chart.line}} {{chart.market}}
    </div>
</div>

问题是div ng-if="hideShow"永远不会显示在屏幕上。如果我将最后一段代码<div ng-if="hideShow"></div>放在第一个<div ng-repeat="stat in stats">内，那么它会显示......但我希望它是一个完全不相关的div。

单击以下div后，如何显示不相关的div显示：

<div class="col-lg-3 col-md-6 col-sm-6" ng-click="hideShow=(hideShow ? false : true); vm.charts(stat.jobId)">

跟随控制器：

// Keep things clean and sane
(function () {
    "use strict";

    angular
        .module('sigmaApp')
        .controller('statisticsController', statisticsController);

    function statisticsController($scope, $state, $location,$document, $mdToast, recordService) {

        // List out our members & methods
        var vm = this;

        //my methods
        vm.closeView = closeView;
        vm.showToast = showToast;
        vm.charts = charts;
        $scope.jobs = [];
        $scope.stats = [];
        $scope.charts = [];
        $scope.hideShow = false;

        recordService.getJobs().then(function(jobs){

            for(var i = 0; i<jobs.data.length; i++){ 
                if(jobs.data[i].type === 'parent')
                    $scope.jobs.push(jobs.data[i]);
            }

            for(var i=0; i<$scope.jobs.length; i++){
                recordService.stats($scope.jobs[i].id).then(function(stats){
                    $scope.stats.push(stats.data[0]);
                });
            }

            console.log($scope.stats);

            for(var i=0; i<$scope.stats.length; i++){
                console.log($scope.stats[i]);
            }

        }).catch(function(err){
            console.log(err);
        });

        function charts(id){
            console.log('build charts for job: '+id);
            var stat;
            for (var i=0; i<$scope.stats.length; i++){
                if ( $scope.stats[i].jobId == id){
                    stat = $scope.stats[i];
                }
            }
            $scope.charts = stat;
        }

        function closeView() {
            $state.go('app.records');
        }

        function showToast(message) {
            $mdToast.show(
                    $mdToast.simple()
                        .content(message)
                        .position('top, right')
                        .hideDelay(5000)
                ); // END toast.show
        } // END showToast

    } // END 

})(); // END iffy

Answer 1

问题是您将div的可见性设置为基本类型（布尔值）。通过原型继承的魔力，您通过

修改范围值

ng-click="hideShow=(hideShow ? false : true)

是从ng-repeat指令创建的子范围。

<div ng-repeat="stat in stats">

因此，该值被遮蔽/隐藏，您不会修改正确的值。您可以阅读更多相关信息here。这就是为什么当你在范围内移动div 时，div会隐藏/显示，但是它不会在ng-repeat的范围之外工作。

要解决此问题，您可以使用'。'符号并保持对物体属性的可见性。

因此，在您的控制器中，您使用布尔标志初始化一个新的对象文字。

$scope.div = {}; $scope.div.hideShow = false;

然后修改您的点击事件以修改此对象

ng-click="div.hideShow = !div.hideShow"

然后通过
修改您的知名度
<div ng-if="div.hideShow"> test <div ng-repeat="chart in charts"> {{chart}} {{chart.data.jobId}} {{chart.jobId}} {{chart.line}} {{chart.market}} </div> </div>

Angular ng-click无法正常工作

1 个答案: