javascript - angularJs点击循环出来的列表要编辑某一条如何获得其信息

问题描述

问 题

就是希望点击ng-repeat出来的每一条，可以对应弹出模态框编辑对应的那一条，并且比如说把哪些已有的字啊什么的直接默认放到输入框去

//循环数据

<tr ng-repeat="x in videos">
    <td class="am-text-middle">{{x.id}}</td>
    <td class="am-text-middle">
        <img ng-srcset="{{x.cover}}" width="200" alt="">
    </td>
    <td class="am-text-middle">{{x.title}}</td>
    <td class="am-text-middle">{{x.create_at}}</td>
    <td class="am-text-middle">
        <button class="am-btn am-btn-primary am-btn-sm am-radius btn-edit" type="button" ng-click="showModal()">编辑</button>
    </td>
</tr>

// 获取分页数据，弹出模态框

var reGetProducts = function(){
    // 发送给后台的请求数据
    var postData = {
        page: $scope.paginationConf.currentPage,
        pageSize: $scope.paginationConf.itemsPerPage
    };

    $http.jsonp("http://api.ergengtv.com/normalvideo/list?page="+postData.page+"&pageSize="+postData.pageSize+"&callback=JSON_CALLBACK").success(function(data){
        // 变更分页的总数
        $scope.paginationConf.totalItems = data.data.count;
        // 变更产品条目
        $scope.videos = data.data.list;
        $scope.showModal = function () {
            var $modal = $('#edit-modal');
                $modal.modal();
        };
    });
};
// 通过$watch currentPage和itemperPage 当他们一变化的时候，重新获取数据条目
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reGetProducts);

//这是我写在页面上的模态框
<div class="am-modal am-modal-no-btn" tabindex="-1" id="edit-modal">
    <div class="am-modal-dialog edit-content">
        <div class="am-modal-hd">编辑
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <form class="am-form am-form-horizontal">
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">标题</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="请输入标题">
                </div>
            </div>

            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">简介</label>
                <div class="am-u-sm-9">
                    <textarea placeholder="请输入简介"></textarea>
                </div>
            </div>

            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">拍摄地点</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="请输入拍摄地点">
                </div>
            </div>

            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">授权许可</label>
                <div class="am-u-sm-9">
                    <select>
                        <option value="option1">选项一...</option>
                        <option value="option2">选项二.....</option>
                        <option value="option3">选项三........</option>
                    </select>
                </div>
            </div>

            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">品牌</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="请输入品牌">
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">肖像权/物权</label>
                <div class="am-u-sm-9">
                    <select>
                        <option value="option1">选项一...</option>
                        <option value="option2">选项二.....</option>
                        <option value="option3">选项三........</option>
                    </select>
                </div>
            </div>

            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">角度</label>
                <div class="am-u-sm-9">
                    <label class="am-radio-inline">
                        <input type="radio"  value="" name="docInlineRadio"> 每一分
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="docInlineRadio"> 每一秒
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="docInlineRadio"> 多好
                    </label>
                </div>
            </div>

            <div class="am-form-group am-text-center">
                <div class="am-u-sm-12 ">
                    <button type="button" class="am-btn am-btn-primary">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

解决方案

谢邀，在点击按钮的时候把数据传进去。
然后在showModal里面把数据传给modal那个ctrl，然后就搞定了。

你这里这个弹窗和页面其他控制器没分离，举个例子

ng-click="showModal(x)"

$scope.showModal = function (item) {
  var $modal = $('#edit-modal');
  $modal.modal();
  $scope.modalData = item;
};
        
function reGetProducts (){
    // 发送给后台的请求数据
    var postData = {
        page: $scope.paginationConf.currentPage,
        pageSize: $scope.paginationConf.itemsPerPage
    };
    $http.jsonp("http://api.ergengtv.com/normalvideo/list?page="+postData.page+"&pageSize="+postData.pageSize+"&callback=JSON_CALLBACK").success(function(data){
        // 变更分页的总数
        $scope.paginationConf.totalItems = data.data.count;
        // 变更产品条目
        $scope.videos = data.data.list;
    });
};

然后在html中直接写，下面做个示例

<input type="text" placeholder="请输入标题" ng-model="modalData.title">

这篇关于javascript - angularJs点击循环出来的列表要编辑某一条如何获得其信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！