Question

我目前正在使用列表视图进行应用。在列表视图中，用户可以在向左滑动列表时编辑和删除项目。我有删除按钮工作。我不知道如何开始使用编辑按钮。当用户点击列表视图时，它将弹出表单，表单将允许用户编辑内部的详细信息，然后他们可以保存它。我在Jsfiddle中遵循了这个例子。这是我想要的，但在列表视图中

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


    })
};

这是我在控制器中的按钮

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

}

Answer 1

    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然后你可以使用add modal或你使用ng-repeat的其他页面的输入然后你把它作为参数传递给函数

离子列表视图编辑数组列表（angularjs）

1 个答案: