来自REST的角度JS和内联编辑数据

时间:2013-11-28 03:49:28

标签: javascript html angularjs x-editable

我对角度很新。

我正在阅读JSONP响应并在页面中显示它。我想允许用户内联编辑部分文本。我发现了角度可变的。但我无法弄清楚 1.我如何在转发器中使用它。我花了几个小时试图使用内联编辑。如果它不在转发器中,它可以工作。否则就会破坏一切。

我有这个:

在我的app.js中:

var app = angular.module('ListApp', ['ui.bootstrap']).config(['$httpProvider', function ($httpProvider)
{
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);;

var app11 = angular.module("app11", ["xeditable"]);

app11.run(function (editableOptions) {
    editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

app11.controller('Ctrl', function ($scope) {
    $scope.user = {
        name: 'awesome user'
    };
});



angular.element(document).ready(function () {
    angular.bootstrap(document.getElementById('list-reminders'), ['ListApp']);
    angular.bootstrap(document.getElementById('xedittxt'), ['app11']);
});

在我的HTML中:

<div id="list-reminders" class="container main-frame" ng-controller="remindersController" ng-init="init()">
            <div class="search-box row-fluid form-inline">
                <nobr>
                    <label>Find</label>&nbsp;
                    <input type="text" ng-model="searchText" value="{{searchText}}" />&nbsp;<input type="submit" class="submit" ng-click="getRemindersByUserId()" value="Search">
                </nobr>
            </div>

            <div class="results-top"></div>
            <div class="results-container">
                <div class="row-fluid">                   
                    <div class="span1">Title</div>
                    <div class="span2">My Notes</div>          

                </div>
                <ul class="item-list" style="display:none;">

                    <li ng-repeat="(key,item) in lists">
                        <div class=" row-fluid">

                            <div id="xedittxt" ng-controller="Ctrl" class="span2">
                                <a href="" editable-text="{{item.user_reminder_title}}"></a>
                            </div>                            
                            <div class="span2">{{item.user_notes}} </div>

                        </div>
                    </li>
                </ul>

在我的controller.js

app.controller("remindersController", function ($scope, $modal, $http) {

    $scope.items = [];
    //api

    $scope.getListApi = '....URL REMOVED';
    var callback = 'callback=JSON_CALLBACK';

    $scope.init = function () {

        //items selected from results to add to list
        $scope.selectedItems = [];

        var $loading = $('.loading');
        var $searchOptions = $('.search-options');
        var $itemList = $('.item-list');

        $scope.getRemindersByUserId = function (userId) {
            $itemList.hide();
            $loading.show();

            var getListUrl = $scope.getListApi + "1&" + callback;

            console.log(getListUrl);

            $http.jsonp(getListUrl).success(function (data) {

                $scope.lists = data;
                $loading.hide();
                $itemList.show();

            }).error(function (err) {
                console.log("getRemindersByUserId error: " + err);
            });

        };

    };

});

0 个答案:

没有答案