2013-07-24 25 views
19

请帮我实现这个功能。我在我的$scope中有一系列物品。现在,当我点击添加项目按钮时,我想将新项目推送到该数组的第一个索引或0索引。提前致谢。 :)

这里的工作的jsfiddle入手:http://jsfiddle.net/limeric29/7FH2e/

HTML:

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

的JavaScript:

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

通过使用splice()而不是push()并分配给要插入的数组索引解决了我的问题。

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> 
相关问题