離子列表視圖編輯數組列表（angularjs）

我目前正在做一個列表視圖的應用程序。在列表視圖中，用戶可以在向左滑動列表時編輯和刪除項目。我有刪除按鈕的工作。我不知道如何開始使用編輯按鈕。當用戶點擊列表視圖時，它會調出表單，讓用戶編輯內部的細節然後保存。我在Jsfiddle中遵循這個例子。這是那種我想要的東西，但在列表視圖離子列表視圖編輯數組列表（angularjs）

http://jsfiddle.net/A5xZ9/2/

這裏是我的代碼爲我的列表視圖

<ion-side-menus> 
       <ion-side-menu-content> 
        <ion-content> 
         <ion-header-bar class="bar-positive"> 
          <button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left"> 
           <i class="icon ion-navicon"></i> 
          </button> 

          <h1 class="title"> Details</h1> 
         </ion-header-bar> 
         <br /> 
         <br /> 

         <ion-list can-swipe="listCanSwipe"> 
          <ion-item ng-repeat="data in tempData" 
             item="data" 
            href="#/detail/{{data.id}}"> 


         Name:{{data.name}}<br /> 



        <ion-option-button class="button-assertive" 
              ng-click="showPopup(data)"> 
            Delete 
           </ion-option-button> 

           <ion-option-button class="button-calm" 
             ng-click="edit(data)"> 
            Edit 
           </ion-option-button> 

          </ion-item> 

         </ion-list> 
        </ion-content> 
       </ion-side-menu-content>

這裏是我的陣列

angular.module('app') 

.factory('WebApi', function() { 

//Dummy Data 
var name = [{ 
     value: "Peter", 
     text: "Peter" 
    }, { 
     value: "John", 
     text: "John" 
    }, { 
     value: "Lucy", 
     text: "Lucy", 
    }, 

var tempData = []; 

//Display 100 item 
for (var i = 0; i < 100; i++) { 

    var selectedName = name[Math.floor((Math.random() * name.length))]; 

    tempData.push({ 
    id: i, 
    name: selectedName.text 


    }) 
};

這裏是我的按鈕in controller

$scope.edit = function (data) { 
    var selectedData = data; 
    console.log(selectedData); 

}

來源

2015-07-21 Big Ticket

angular.module('app') 

    .factory('WebApi', function() { 

    //Dummy Data 
    var name = [{ 
    value: "Peter", 
    text: "Peter" 
    id: 1 

    }, { 
    value: "John", 
    text: "John" 
    id: 2 
    }, { 
    value: "Lucy", 
    text: "Lucy", 
    id: 3 
    }, 

$scope.edit=function(id) 
{ 

    //here you place your function to edit the data selected 
    } 



    in the html 


    <div ng-repeat="p in data"> 

    <input type="text" ng-model="text" > 
    <button ng-click="edit(p.id)" >edit</button>

我希望你明白這個方法可以讓你知道所選數據的ID，然後你可以使用添加模式或來自你使用的其他頁面的輸入ng-repeat然後你把它作爲參數傳遞給函數

來源

2016-02-21 00:11:45

離子列表視圖編輯數組列表（angularjs）

回答

相關問題