Question

好吧，乔治布勒的骷髅必须在坟墓里感到一些痛苦，因为我的布尔人变得疯狂并开始加入派对。我真的认为他们想反抗我。

现在更严重：可能我在$ watch方法中遗漏了一些东西，或者没有正确使用控制器，但这就是发生的事情，请检查：

我的控制器：

var ctrls = angular.module('controllers', []);

ctrls.controller('mainCtrl', function($scope){

    $scope.showChart = false;
    $scope.data = [];
    $scope.labels = [];
    $scope.dataTemp = "";
    $scope.labelsTemp = "";

    $scope.$watch("dataTemp", function(){
        checkChart();
        $scope.data = $scope.dataTemp.split(",");


    });
    $scope.$watch("labelsTemp", function(){
        checkChart();
        $scope.labels = $scope.labelsTemp.split(",");

    });

    function checkChart(){
        console.log($scope.dataTemp.length + ", "+$scope.labelsTemp.length +" : ("+($scope.data.length > 0)+", "+($scope.data.length > 0)+") = "+$scope.showChart);
        if($scope.data.length > 0 && $scope.labels.length > 0){
            $scope.showChart = true;
        } else {
            $scope.showChart = false;
        }
    }
});

记住那个console.log，我会在一段时间内展示这些小家伙如何参加派对（硬）。现在，我编写索引时路由器带给我的HTML模板：

<div class="contenedor">
<form class="main-form" role="form">
        <legend>Inserta los datos para el gráfico</legend>

        <div class="form-group">
            <label for="">Título</label>
            <input type="text" class="form-control" id="" placeholder="Título del gráfico" ng-model="title">
        </div>
        <div class="form-group">
            <label for="">Grupos</label>
            <input type="text" class="form-control" id="" placeholder="Escribe grupos separados por comas" ng-model="labelsTemp">
        </div>
        <div class="form-group">
            <label for="">Datos</label>
            <input type="text" class="form-control" id="" placeholder="Escribe datos separados por comas" ng-model="dataTemp">
        </div>
    </form>

</div>
<div class="main-chart" ng-show="showChart">
    <span class="label title">{{title}}</span>
    <canvas id="grafico" class="chart chart-doughnut"
    chart-data="data" chart-labels="labels">
    </canvas>
</div>

这件事确实有效......而且反应灵敏！问题是，我想在表单中没有写入数据时隐藏图表。一开始，它是成功隐藏的，但是一旦我写了一些东西， checkChart（）的两个布尔函数都会评估为true，不知怎的，所以激活ng-show指令。

在编写1个字符时，查看我的console.log输出，然后删除它，然后编写另一个字符，然后编写它：

0, 0 : (false, false) = false         << Two initial outputs without user
0, 0 : (true, true) = false           << interaction (I don´t know why this
                                         happens)
0, 1 : (true, true) = true
0, 0 : (true, true) = true 
0, 1 : (true, true) = true 
0, 0 : (true, true) = true

我错过了什么？这绝对没有意义。

Answer 1

当您将空字符串分开时，datatemp和labelsTemp如下：

$scope.data = $scope.dataTemp.split(',')

这将返回一个空字符串数组。所以$scope.data实际上是一个数组，其中一个空字符串作为其中的一个元素，如下所示：

$scope.data == ['']

所以$scope.data和$scope.labels的长度现在为1。

因此if条件变为真，$scope.showChart再次变为真。

希望有所帮助

Angular疯狂的布尔派对

1 个答案: