Question

我有一个非常简单的日历（使用Ionic / AngularJS），它使用虚构的月份，它只是一个包含数字1-31的表格。

我目前正在使用它，以便当用户按下单元格时，选择了一个＆＃39;被添加到选定的＆＃39; td＆＃39;和'td＆＃39;的内容被添加到数组中。

这似乎工作得很好，但是，如果我要取消选择一个单元格，那么该项目将再次添加到“答案”数组中。所以现在我的数组中有重复项。

如何在以下小提琴中修改我的代码以选择/取消选择字段并修改我的答案＆＃39;相应的阵列？

MyCtrl

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];

  $scope.bindCellValue = function(event) {
        var elem = event;

        if(elem.target.className == 'selected')
            elem.target.className = '';
        else
            elem.target.className = 'selected';

        $scope.input.answers.push(parseInt(elem.target.innerHTML));
        console.log($scope.input.answers);
    }
}

模板（HTML）

<div ng-app>
      <div ng-controller="MyCtrl">
        <table class="calendar">
                <thead>
                    <tr>
                        <th>M</th>
                        <th>T</th>
                        <th>W</th>
                        <th>T</th>
                        <th>F</th>
                        <th>S</th>
                        <th>S</th>
                    </tr>
                </thead>
                <tbody ng-click="bindCellValue($event)">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <td>22</td>
                        <td>23</td>
                        <td>24</td>
                        <td>25</td>
                        <td>26</td>
                        <td>27</td>
                        <td>28</td>
                    </tr>
                    <tr>
                        <td>29</td>
                        <td>30</td>
                        <td>31</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
      </div>
</div>

http://jsfiddle.net/g8sxj6df/

Answer 1

您只需在推送前检查阵列。如果元素存在，只需从数组中删除它（如果需要）。这是更新后的Controller的外观。

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];

  $scope.bindCellValue = function(event) {
        var elem = event;

        if(elem.target.className == 'selected')
            elem.target.className = '';
        else
            elem.target.className = 'selected';
        num = parseInt(elem.target.innerHTML);
        if($scope.input.answers.indexOf(num) == -1){
            $scope.input.answers.push(num);
        }else{
            $scope.input.answers.splice($scope.input.answers.indexOf(num),1);
        }

        console.log($scope.input.answers);
    }
}

要看到它正常工作，请在此处查看分叉的JSFiddle - http://jsfiddle.net/zqbL8nc0/

如果您有任何疑问/问题，请告诉我。

Answer 2

取消选择日期时可以使用拼接功能。

更新JS代码：

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];

  $scope.bindCellValue = function(event) {
        var elem = event;

        if(elem.target.className == 'selected'){
            elem.target.className = '';            
            var elemIdx = $scope.input.answers.indexOf(parseInt(elem.target.innerHTML));
            $scope.input.answers.splice(elemIdx, 1);            
        }
        else{
            elem.target.className = 'selected';
            $scope.input.answers.push(parseInt(elem.target.innerHTML));
        }

        console.log($scope.input.answers);
    }
}

请参阅JSFiddle中的工作代码：http://jsfiddle.net/whj4z346/

Answer 3

尝试弹出所选元素

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];

  $scope.bindCellValue = function(event) {
        var elem = event;

        if(elem.target.className == 'selected'){
            elem.target.className = '';
            $scope.input.answers.pop(parseInt(elem.target.innerHTML));
        }
        else{
            elem.target.className = 'selected';

        $scope.input.answers.push(parseInt(elem.target.innerHTML));}
        console.log($scope.input.answers);
    }
}

Answer 4

您需要检查taht数组是否已包含此项目。如果是，则将其从数组中删除，否则将其添加到数组中。

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];
    $scope.bindCellValue = function(event) {
    var elem = event;

    if(elem.target.className == 'selected')
        elem.target.className = '';
    else
        elem.target.className = 'selected';
    var value = parseInt(elem.target.innerHTML);
    var index = $scope.input.answers.indexOf(value);
    if( index > -1 ){
        //remove element 
        $scope.input.answers.splice(index, 1);
    }else{
        // add element   
        $scope.input.answers.push(value);
    }

    console.log($scope.input.answers);
}
}

请参阅JSfiddle

Answer 5

function MyCtrl($scope) {
    $scope.input = [];
    $scope.input.answers = [];

  $scope.bindCellValue = function(event) {
        var elem.target = event;

        if(!elem.className.match(/selected/)){
            elem.classList.add("selected");
            $scope.input.answers.push(parseInt(elem.innerHTML));
        } else {
            elem.classList.remove("selected");
            var val = parseInt(elem.innerHTML),
                index = $scope.input.answers.indexOf(
                             parseInt(elem.innerHTML)
                        );
            if (index >= 0) {
                $scope.input.answers.splice( index, 1 );
            }
        }
        console.log($scope.input.answers);
    }
}

那应该可以解决你的问题。如果没有，请尽快告诉我......

选择/取消选择单元格时，从数组中添加/删除项目

5 个答案: