2013-07-24 8 views
19

Hãy giúp tôi triển khai chức năng này. Tôi có một loạt các mục trong số $scope của tôi. Bây giờ, khi tôi nhấp vào nút Thêm mục, tôi muốn đẩy một mục mới vào chỉ mục đầu tiên hoặc 0 chỉ mục của mảng đó. Cảm ơn trước. :)

Dưới đây là một công tác jsFiddle để bắt đầu với: 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); 
    }; 
} 

Trả lời

26

Giải quyết vấn đề của tôi bằng cách sử dụng mối nối() thay vì push() và gán cho chỉ mục mảng nào cần chèn.

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); 
    }; 
} 

Dưới đây là các cập nhật fiddle cho việc này. http://jsfiddle.net/limeric29/xvHNe/

+15

bạn cũng có thể sử dụng 'unshift'. đó là một cách phổ biến để đặt trước các phần tử cho một mảng. –

23

Bạn có thể sử dụng chức năng 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

Đây là cách tiếp cận tốt nhất và đơn giản nhất! –

0

Hãy thử điều này:

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); 

Một dòng, không chắc chắn lý do tại sao những người khác đã làm cho nó rất khó khăn

0

Tôi nghĩ rằng, không cần thiết hoạt động này. Bạn có thể giải quyết nó như thế này;

<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>