代码之家  ›  专栏  ›  技术社区  ›  Armeen Moon

在angular/javascript中按索引而不是按创建顺序删除对象

  •  1
  • Armeen Moon  · 技术社区  · 12 年前

    我命名为touts的对象将按创建顺序删除,而不是按id删除

    调用删除它们的函数 deleteTouts()

    这是一个实时代码:

    jsFiddle link

    HTML格式

    <div ng-app="App">
      <div ng-controller="Controller" class="container">
        <button ng-click="addFields()">
              Add Field
        </button>
            <hr />
            <hr />
        <div class="row" ng-repeat="(keyField, keyVal) in fields">
            <input   ng-hide="true" value="field" ng-model="field.id" />
             <div>{{keyVal.id}} -- <span><a href="" ng-click="removeFields($index)">delete</a></span></div> 
    
             <div class="" ng-repeat="(keyTout, valTout) in fields[keyField].touts">
    
                 <div class="captions">
                     <input value="field"  ng-model="valTout.caption" />
                     <input value="field"  ng-model="valTout.subCaption" />
                     <br/>
                 </div>
                 <button ng-click="deleteTouts(keyTout)">delete tout</button>       
            </div>
            <button ng-click="addTouts(keyField)">add tout</button>
                <hr />
        </div>
    
        <hr />
        <p class="well">fields: {{fields | json}}</p>
      </div>
    </div>
    

    JS文件

    angular.module('App', []);
    
    function Controller($scope) {
        $scope.friends = [];
        $scope.fields = [ 
            //'id': 0, touts: [{'caption': 'default caption', 'subCaption': 'default subcaption'}]
        ];
    
    
        $scope.addFields = function() {
           var idFields = $scope.fields.length == undefined ? 0 : $scope.fields.length ; 
    
           $scope.fields.push({id: idFields, touts: [{'caption': 'default caption', 'subCaption': 'default subcaption'}]});
        };
        $scope.removeFields = function(id) {
    
            $scope.fields.splice( $scope.fields.indexOf(id), 1 );
        };
    
        $scope.addTouts = function (id) {
            //alert(id);
            $scope.fields[id].touts.push({'caption': 'default caption', 'subCaption': 'default subcaption'});
        }
        $scope.deleteTouts = function (id) {
            //alert(id);
           $scope.fields[id].touts.splice( $scope.fields[id].touts.indexOf(id), 1 );
        }
    }
    

    方向:

    Create 2 fields ->
    
    create 2 touts in field[0] -> 
    
    create 1 tout in field[1]
    

    现在为什么从中删除 field[1]tout[0] 使用 删除tout 它删除了第一次吹捧。

    此功能不正确。最后,有没有更好的加减法?(指令)?

    2 回复  |  直到 12 年前
        1
  •  2
  •   Craig Squire    12 年前

    deleteTouts方法需要2个参数。字段id和tout id。由于您只是传递一个tout id,所以总是从具有相同id的字段中删除tout。

    使用两个参数并传入字段id可以修复此问题。

    http://jsfiddle.net/4Weyg/

    <button ng-click="deleteTouts(keyField, keyTout)">delete tout</button>  
    
    $scope.deleteTouts = function (fieldid, id) {
       $scope.fields[fieldid].touts.splice( id, 1 );
    }
    
        2
  •  0
  •   user2819648 user2819648    12 年前

    仍然无法指挥,所以我不得不将其作为答案发布: 正在发生以下情况: $scope.fields.indexOf(id) 正在返回-1,因为中没有任何索引 $scope.fields

    你必须穿过所有的领域,用正确的id切割出正确的领域。