javascript - Angular 疯狂 bool 派对

Question

嗯，George Boole 的骨架一定在它的坟墓里感到有些疼痛，因为我的 bool 人刚刚变得疯狂并开始举办派对。我真的认为他们想反抗我。

现在更严重了:可能我在 $watch 方法中遗漏了一些东西，或者不正确地使用了 Controller ，但这就是正在发生的事情，检查:

我的 Controller :

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>

这东西确实有效……而且非常好而且 react 灵敏!问题是，当没有数据写入表单时，我想隐藏图表。一开始，它被成功隐藏了，但是一旦我写了一些东西，checkChart() 的两个 bool 函数都以某种方式计算为真，因此激活了 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 再次变为真。

希望对你有帮助