2013-07-24 6 views
19

この機能を実装するのを手伝ってください。私は私の$scopeの項目の配列を持っています。ここで、Add Itemボタンをクリックすると、新しい項目をその配列の最初のインデックスまたは0のインデックスにプッシュします。前もって感謝します。 http://jsfiddle.net/limeric29/7FH2e/

HTML::

<div ng-controller="Ctrl"> 
    {{data}}<br/> 
    <input type="button" ng-click="addItem()" value="Add Item" /> 
</div> 

はJavaScript::)

はここで開始する作業jsFiddle

function Ctrl($scope) { 
    $scope.data = [ 
    new String('Item 5'), new String('Item 4'), new String('Item 3'), new String('Item 2'), new String('Item 1')]; 

    $scope.addItem = function() { 
     var c = $scope.data.length + 1; 
     var item = new String('Item ' + c) 
     $scope.data.push(item); 
    }; 
} 

答えて

26

push()の代わりにsplice()を使用し、挿入する配列インデックスを割り当てることで、私の問題を解決しました。

HTML:

<div ng-controller="Ctrl"> 
    <pre>{{data}}</pre><br/> 
    <input type="button" ng-click="addItem()" value="Add Item" /> 
</div> 

Javascriptを:

function Ctrl($scope) { 
    $scope.data = [ 
    new String('Item 4'), new String('Item 3'), new String('Item 2'), new String('Item 1')]; 

    $scope.addItem = function() { 
     var c = $scope.data.length + 1; 
     var item = new String('Item ' + c) 
     $scope.data.splice(0, 0, item); 
    }; 
} 

ここでは、このための更新フィドルです。 http://jsfiddle.net/limeric29/xvHNe/

+15

「unshift」を使用することもできます。これは要素を配列にプリペンドする一般的な方法です。 –

23

unshift機能を使用できます。

function Ctrl($scope) { 
$scope.data = [ 
new String('Item 5'), new String('Item 4'), new String('Item 3'), new String('Item 2'), new String('Item 1')]; 

$scope.addItem = function() { 
    var item = new String('Item ' + c) 
    $scope.data.unshift(item); 
}; 
} 
+0

これは最も簡単で簡単な方法です! –

0

これを試してみてください:

function Ctrl($scope) { 
    $scope.data = [ 
    new String('Item 4'), new String('Item 3'), new String('Item 2'), new String('Item 1')]; 

    $scope.addItem = function() { 
     var c = $scope.data.length + 1; 
     var item = new String('Item ' + c); 
     $scope.data.push(item); 
    }; 
} 
6
$scope.data.unshift(item); 

一行を、わからない他の人がそれはとても難しい

0

私は、この操作は不要、考えさせられた理由。あなたはこのようにそれを解決することができます。

<div ng-controller="Ctrl"> 
    <!-- "$index" is short parameter, "true" statment is reverse parameter --> 
    {{data | reverse:$index:true}}<br/> 
    <input type="button" ng-click="addItem()" value="Add Item" /> 
</div> 
関連する問題