无法使用Angular.js / Javascript删除所需的行

时间:2016-05-24 11:09:11

标签: javascript angularjs

我有一个问题。我也不能使用angular.js从数组中删除正确的行。我在下面解释我的代码。

<tr ng-repeat="d in days">
        <td>{{d.day_name}}</td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.category" ng-options="cat.name for cat in listOfCategory track by cat.value" ng-change="removeBorder($index,answer.category.value,$parent.$index)" ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)">
                    <option value="">Select Category</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index] track by sub.value">
                    <option value="">Select Subcategory</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <!--<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">-->
                  <input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answer.comment">
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td style="width:20px">
                  <input ng-show="d.answers.length>1" class="btn btn-red" type="button" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $index)"> 
                </td>
                <td ng-show="$last">
                  <input type="button" class="btn btn-success" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
                  <button type="button" id="btn" ng-click="checkAnswer(d.answers)">Check</button>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
          </table>
        </td>
      </tr>

上表给出了如下输出。

enter image description here

这里我已经为星期一添加了3行,并且假设我按照要求点击了中间行-按钮,唯一的中间行应该删除但是这里是从第3行删除错误的子类别部分,其屏幕截图是如下所示。

enter image description here

我从第一个屏幕截图中删除了第二行仍然存在第二行子类别部分,第三行子类别部分已删除,这是错误的删除过程。我在下面解释我的控制器端代码。

$scope.days=[];
    $http({
        method:'GET',
        url:"php/customerInfo.php?action=day",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        //console.log('day',response.data);
    angular.forEach(response.data, function(obj) {
      obj.answers = [];
      $scope.addNewRow(obj.answers);
      $scope.days.push(obj);
    });
    },function errorCallback(response) {
    })
    }

   $scope.addNewRow = function(answers,hasDelete) {
    answers.push({
      category: null,
      subcategory: null,
      comment: null,
      hasDelete: hasDelete ? hasDelete : false
    });
  };

  $scope.removeRow = function(answers, $index){
    answers.splice($index, 1);
    //answers.splice(answers.length-1,1);
  };

这里所有数据都是动态绑定的。我需要删除右边的行。请帮帮我。

1 个答案:

答案 0 :(得分:-1)

尝试从$ index参数中删除$。

$scope.removeRow = function(answers, index){
answers.splice(index, 1);
//answers.splice(answers.length-1,1);

};