Onsen UI 캐 러셀 스 와이프 목록 항목

ios/android와 같이 왼쪽에서 오른쪽으로 스 와이프하여 목록의 항목을 삭제하려면 onsen UI 프레임 워크의 캐 러셀 기능을 사용하고 있습니다. 스 와이프가 목록에서이 항목을 삭제하고 순서를 바꿔야하는 "삭제"버튼을 표시합니다. 문제는보기가 항상 버튼을 누른 대신 마지막 행을 삭제한다는 것입니다. 행이 올바르게 제거됩니다. 데이터 배열Onsen UI 캐 러셀 스 와이프 목록 항목

누구에게도 답변이 있습니까?

* 희망이 있습니다. 거기에 해결책이 있습니다.

출처

2015-01-19 Alex M.

시도한 것을 볼 수 있도록 코드를 제공해야합니다. ngRepeat 지시문과 <ons-list>을 사용하고 있습니까? 이 경우 데이터 배열에서 항목을 제거하면됩니다.

는 컨트롤러에서 당신은 (아무것도 할 수 있습니다) 항목의 목록을 만들 : 당신의 HTML에서

angular.module('myApp').controller('MyController', function($scope) { 
    $scope.items = ['A', 'list', 'of', 'items']; 
});

당신은 그들을 통해 루프 ngRepeat을 사용합니다. 항목을 제거하려면 ngClick을 사용하고 목록을 연결하십시오.

<ons-list> 
    <ons-list-item ng-repeat="item in items"> 
    {{ item }} 
    <ons-button ng-click="items.splice($index, 1)">Remove item</ons-button> 
    </ons-list-item> 
</ons-list>

다음 예에서 캐 러셀을 사용했지만 사용자가 목록에 넣은 것이 중요하지 않습니다. http://codepen.io/argelius/pen/qEmjEB

출처

2015-01-20 02:26:00

안녕하세요, Andy, 감사합니다! 공장! 이것에 대한 흥미로운 사실은, 나는 거의 같은 접근 방식을 가졌지 만. 그 다음 나는 당신과 아무것도 문제를 베꼈다!! 건배! –

안녕하세요, Andy,이 아이디어에 대해 감사드립니다. 그러나 왼쪽으로 문질러서 문지르는 대신 오른쪽으로 문지르는 것이 어떻습니까? 어떻게해야합니까? – kjames

물론입니다. 컨베이어 항목을 전환하고 codepen 예제에서 initial-index = "0"으로 설정하면됩니다. http://codepen.io/argelius/pen/NPEoYm –

Onsen UI 캐 러셀 스 와이프 목록 항목

답변

관련 문제