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

Question

就是希望点击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);

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

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

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

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

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

            <p class="am-form-group">
                <label class="am-u-sm-3 am-form-label">角度</label>
                <p 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>
                </p>
            </p>

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

Answer 1

谢邀，在点击按钮的时候把数据传进去。
然后在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">

Answer 2

西红柿的方法很标准了，我就不写了。不太知道你这个modal是怎么回事，是第三方的东西么？其实这个modal完全可以自己写，然后就把$scope.modalData中的东西绑定上去就行了。这个modal不复杂，美工分分钟搞定。想复用就自己封装成组件，不复用就直接用ng-show来控制显示隐藏就ok了。