Splice不与Angularjs合作

时间：2015-10-21 03:32:41

标签： javascript angularjs ionic-framework

我现在尝试制作能够添加，编辑和删除的项目列表表单。 添加和编辑工作正常，但是，当我尝试删除它时，它没有按预期工作。

这是我的部分代码，包括删除按钮。 

$scope.deleteItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
};

第二部分是我如何删除项目

$index

我尝试传递delete，或使用mCipher.init(Cipher.DECRYPT_MODE, key, mCipher.getParameters());而不是拼接，但它仍然无法正常工作。请帮帮我。谢谢。

这是我的demo

注意：我认为项目已删除，但html未更新。

4 个答案:

答案 0 :(得分：2)

当Angular不知道对模型进行了更改时，有时会发生这种情况。在这种情况下，您可以通过将您的函数包含在$timeout内并且没有延迟来强制进行更新：

$scope.deleteItem = function(item) {
    $timeout(function () {
        $scope.items.splice($scope.items.indexOf(item), 1);
    });
};

不要忘记将$timeout服务注入控制器。

答案 1 :(得分：1)

我不太明白为什么？但你的转发器中 ng-form 属性的问题。

如果删除它 - 所有工作

var nameApp = angular.module('starter', ['ionic', 'ngMessages']);

nameApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('auth', {
      url: '/auth',
      templateUrl: 'auth.html',
    })
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });

  $urlRouterProvider.otherwise("/auth");

});


nameApp.directive('isolateForm', [function() {
  return {
    restrict: 'A',
    require: '?form',
    link: function(scope, elm, attrs, ctrl) {
      if (!ctrl) {
        return;
      }

      // Do a copy of the controller
      var ctrlCopy = {};
      angular.copy(ctrl, ctrlCopy);

      // Get the parent of the form
      var parent = elm.parent().controller('form');
      // Remove parent link to the controller
      parent.$removeControl(ctrl);

      // Replace form controller with a "isolated form"
      var isolatedFormCtrl = {
        $setValidity: function(validationToken, isValid, control) {
          ctrlCopy.$setValidity(validationToken, isValid, control);
          parent.$setValidity(validationToken, true, ctrl);
        },
        $setDirty: function() {
          elm.removeClass('ng-pristine').addClass('ng-dirty');
          ctrl.$dirty = true;
          ctrl.$pristine = false;
        },
      };
      angular.extend(ctrl, isolatedFormCtrl);
    }
  };
}]);



nameApp.controller('AuthCtrl', function($scope, $state) {

  $scope.newItem = {
    description: undefined,
    quantity: undefined,
    price: undefined,
    taxType: undefined
  };

  $scope.items = [];

  $scope.addItem = function() {
    console.log({
      description: $scope.newItem.description,
      quantity: $scope.newItem.quantity,
      price: $scope.newItem.price,
      taxType: $scope.newItem.taxType
    });

    $scope.items.push({
      description: $scope.newItem.description,
      quantity: $scope.newItem.quantity,
      price: $scope.newItem.price,
      taxType: $scope.newItem.taxType
    });

    console.log($scope.items);

    $scope.newItem.description = undefined;
    $scope.newItem.quantity = undefined;
    $scope.newItem.price = undefined;
    $scope.newItem.taxType = "SR";

  };

  $scope.deleteItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };

  $scope.authorization = {
    referenceNo: '',
  };

  $scope.signIn = function(form) {
    if (form.$valid) {
      $state.go('home');
    }
  };

});

nameApp.controller('HomeCtrl', function($scope) {

});
.error-container {
  margin: 5px 0;
}

.error-container:last-child {
    margin: 5px 0 0;
}

.error {
  padding: 10px 16px;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
  vertical-align: middle;
}

.error i {
  font-size: 24px;
  color: #B83E2C;  
  vertical-align: middle;
}

.last-error-container > .error {
  padding: 10px 16px 0;
}

.has-errors {
  border-bottom: 3px solid #B83E2C;
}

.no-errors {
  border-bottom: 3px solid green;
}
<html ng-app="starter">
 
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>  
  
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="auth.html" type="text/ng-template">
    <ion-view view-title="Authorization Page">  
    
      <ion-content class="padding" ng-controller="AuthCtrl">
      
        <h2 style="text-align: center;">Form validation example</h2><br/>
        
        <form name="newDocumentForm" ng-submit="signIn(newDocumentForm)" novalidate>
        
          <div class="list">
          
            <label class="item item-input" ng-class="{ 'has-errors' : newDocumentForm.referenceNo.$invalid && newDocumentForm.$submitted, 'no-errors' : newDocumentForm.referenceNo.$valid  && newDocumentForm.$submitted}">
              <span class="input-label">Reference No</span>
              <input type="text" name="referenceNo" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
            </label>
            
            <div class="error-container" ng-show="newDocumentForm.referenceNo.$error && newDocumentForm.$submitted" ng-messages="newDocumentForm.referenceNo.$error">
              <div ng-messages-include="error-list.html"></div>
            </div>
            
          </div>
        
          <!-- Title -->
          <div class="row">
            <div class="col">Description</div>
            <div class="col">Quantity</div>
            <div class="col">Price</div>
            <div class="col">Tax Type</div>
            <div class="col col-20">Amount</div>
            <div class="col col-10"></div>
          </div>
					
          <!-- Added Items Stage -->
          <div ng-repeat-start="item in items" class="row">
            <div class="col">
              <input type="text" name="description" ng-model="item.description" placeholder="description" required>
            </div>
            <div class="col">
              <input type="number" name="quantity" pattern="\d*" ng-model="item.quantity" placeholder="quantity" required>
            </div>
            <div class="col">
              <input type="text" name="price" ng-model="item.price" placeholder="price" required>
            </div>
            <div class="col">
              <select name="taxType" ng-model="item.taxType" required>
                <option value="ZR">ZR</option>
                <option value="SR">SR</option>
              </select>
            </div>
            <div class="col col-20" ng-bind="(item.quantity&&item.price)?((item.quantity*item.price) | currency:''):'0.00'"></div>
            <div class="col col-10">
              <button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem(item)"></button>
            </div>
          </div>
          
          <hr ng-repeat-end>
          
					<!-- Adding Stage -->
          <div ng-form="addItemForm" class="row" isolate-form>
            <div class="col">
              <input type="text" name="description" ng-model="newItem.description" placeholder="description" required/>
            </div>
            <div class="col">
              <input type="number" pattern="\d*" name="quantity" ng-model="newItem.quantity" placeholder="quantity" required/>
            </div>
            <div class="col">
              <!--<input type="text" name="price" ng-model="newItem.price" placeholder="price" ng-pattern="/^[0-9]{1,7}$/" required/>-->
              <input type="text" name="price" ng-model="newItem.price" placeholder="price" step="0.01" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" required/>
            </div>
            <div class="col">
              <select name="taxType" ng-model="newItem.taxType" required>
                <option value="ZR">ZR</option>
                <option value="SR">SR</option>
              </select>
            </div>
            <div class="col col-20" ng-bind="(newItem.quantity&&newItem.price)?((newItem.quantity*newItem.price) | currency:''):'0.00'"></div>
            <div class="col col-10">
              <button type="button" ng-disabled="addItemForm.$invalid" class="button button-balanced button-clear icon ion-plus-circled" ng-click="addItem()"></button>
            </div>
          </div>
            
          <div class="error-container last-error-container" ng-show="addItemForm.price.$error.pattern" ng-messages="addItemForm.price.$error">
            <div ng-messages-include="currency-error-list.html"></div>
          </div>
          
          <button class="button button-full button-positive" type="submit">
            Submit
          </button>
            
        </form>   
        
      </ion-content>
      
    </ion-view>
  </script>  
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Second page">
      <ion-content class="padding">
          <h1>Wellcome</h1>
      </ion-content>
    </ion-view>
  </script>   

  <script id="currency-error-list.html" type="text/ng-template">  
    <div class="error" ng-message="pattern">
      <i class="ion-information-circled"></i> 
      Invalid currency format!
    </div>
  </script> 

  <script id="error-list.html" type="text/ng-template">  
    <div class="error" ng-message="required">
      <i class="ion-information-circled"></i> 
      This field is required!
    </div>
    <div class="error" ng-message="minlength">
      <i class="ion-information-circled"></i> 
      Minimum length of this field is 5 characters!
    </div>
    <div class="error" ng-message="maxlength">
      <i class="ion-information-circled"></i> 
      Maximum length of this field is 20 characters!
    </div>
  </script>

答案 2 :(得分：0)

遇到了同样的问题; “拼接不起作用”。在我的情况下，我必须解决如下，如果它有助于某人。

如果您正在处理对象，请注意'indexOf'适用于数组而不适用于数组内的Object。您可以执行以下操作来识别索引并处理此案例; 

$scope.removeReport = function(report) {
    var index = $scope.contact.reports.map(function(r) { return r.id;}).indexOf(report.id);
        if (index >= 0) {
          $scope.contact.reports.splice(index, 1);
        }
}

答案 3 :(得分：-2)

使用Index代替Item 

<button type="button" class="button button-assertive button-clear icon ion-close-circled" ng-click="deleteItem($index)"></button>

同样在Controller 

$scope.deleteItem = function(index) {
    $scope.items.splice(index, 1);
};
相关问题
最新问题