在json中获取{" _id":null}(AngularJS)

时间:2016-06-02 14:39:24

标签: angularjs json null

images.module.js

(function () {
'use strict';

angular
    .module('imgModule.images', ['ui.router', 'ngResource', 'ngMessages', 'ui.bootstrap', 'ngAnimate', 'ngTouch']);

})();

images.router.js

(function () {
'use strict';

angular
    .module('imgModule.images')
    .config(config);

config.$inject = ['$stateProvider'];
function config ($stateProvider) {

    $stateProvider

        .state('main.imgList', {
            url: '/images-list',
            views: {
                'content@': {
                    templateUrl: 'app/components/images/images-list.html',
                    controller: 'imagesListController',
                    controllerAs: 'ilc',
                    resolve: {
                        images: getImages
                    }
                }
            }
        })

        .state('main.imgAdd', {
            url: '/images-list/add',
            views: {
                'content@': {
                    templateUrl: 'app/components/images/images-add.html',
                    controller: 'imagesController',
                    controllerAs: 'ic',
                    resolve: {
                        images: getAllImages,
                        title: editTitle,
                        newImg: saveImages
                    }
                }
            }

        })

        .state('main.imgEdit', {
            url: '/images/:id',
            views: {
                'content@': {
                    templateUrl: 'app/components/images/images-edit.html',
                    controller: 'imagesController',
                    controllerAs: 'ic',
                    resolve: {
                        images: getImages,
                        title: editTitle,
                        newImg1
                    }
                }
            }
        });

    getImages.$inject = ['Albums'];
    function getImages(Albums) {
        return Albums.get({pageSize:5}).$promise;
    }

    newImages.$inject = ['Albums'];
    function newImages(Albums) {
        return new Albums();
    }

    saveImages.$inject = ['Albums'];
    function saveImages(Albums) {
        return Albums.save().$promise;
    }

    getAllImages.$inject = ['Albums'];
    function getAllImages(Albums) {
        return Albums.get().$promise;
    }

    retrieveImages.$inject =['$stateParams', 'Albums'];
    function retrieveImages($stateParams, Albums) {
        return Albums.get({id: $stateParams.id}).$promise;
    }

    editTitle.$inject = ['$stateParams'];
    function editTitle($stateParams) {
        return $stateParams.description;
    }

    newImg1.$inject = ['$stateParams'];
    function newImg1 ($stateParams){
        return { description : $stateParams.id};
    }

}

})();

图像-list.service.js

(function() {
"use strict";

angular
    .module('imgModule.images')
    .factory('Albums', Albums);

Albums.$inject = ['$resource'];
function Albums($resource) {
    var collectionName = "images";
    return $resource("http://localhost:3000/api/:collectionName/:id",
        { id: "@id", collectionName: collectionName},
        { update: { method: 'PUT' } });
}
})();

图像-add.service.js

(function() {
"use strict";

angular
    .module('imgModule.images')
    .factory('addImgs', addImgs);

addImgs.$inject = ['$http'];
function addImgs($http) {
    var collectionName = "images";

    var service = {
        add: add
    }

    return service;

    function add(newImg) {
        return $http
            .post('http://localhost:3000/api/' + collectionName, {
                id: "ic.newImg.id",
                title: "ic.newImg.title",
                album: "ic.newImg.album",
                description: "ic.newImg.description",
                path_hires: "ic.newImg.path_hires",
                path_lores: "ic.newImg.path_lores"
            }).success(function(data, status, headers, config){
                console.log(data)});
        }
}

})();

图像-add.controller.js

(function () {
'use strict';

angular
    .module('imgModule.images')
    .controller('imagesController', imagesController);

imagesController.$inject = ['$location', 'newImg', 'images','addImgs'];
function imagesController ($location, newImg, images, addImgs) {
    var ic = this;

    ic.images = images.results;

    ic.newImg = newImg;

    ic.save = function(newImg) {
        addImgs.add(newImg);
    };

    function success() {
        $location.path('/images');
    }
}
})();

图像-add.html

<div class="container">
<hr>
<div>
    <form role="form" class="form-horizontal" name="ic.form" novalidate ng-submit="ic.save(ic.newImg)">
        <div class="form-group">
            <label class="control-label col-sm-2" for="id">Id</label>
            <div class="col-sm-6 col-md-4">
                <input type="hidden" name="id" ng-value="ic.newImg.id" />
            </div>
            <div ng-messages="ic.form.id.$error" ng-show="ic.form.id.$touched">
                <p ng-message="required">This field is required.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="title">Title</label>
            <div class="col-sm-6 col-md-4">
                <input type="text" ng-model="ic.newImg.title" class="form-control">
            </div>
            <div ng-messages="ic.form.title.$error" ng-show="ic.form.title.$touched">
                <p ng-message="required">This field is required.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="album">Year</label>
            <div class="col-sm-6 col-md-4">
                <select ng-model="ic.newImg.album" id="album" class="form-control">
                    <option value="">---</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                </select>
            </div>
            <div ng-messages="ic.form.album.$error" ng-show="pc.form.album.$touched">
                <p ng-message="required">This field is required.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="description">Description</label>
            <div class="col-sm-6 col-md-4">
                <input type="text" ng-model="ic.newImg.description" class="form-control">
            </div>
            <div ng-messages="ic.form.description.$error" ng-show="ic.form.description.$touched">
                <p ng-message="required">This field is required.</p>
                <p ng-message="minlength">This field needs to contain min 4 digits.</p>
                <p ng-message="maxlength">This field needs to contain max 30 digits.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="path_hires">Wallpaper</label>
            <div class="col-sm-6 col-md-4">
                <input type="text" ng-model="ic.newImg.path_hires" class="form-control">
            </div>
            <div ng-messages="ic.form.path_hires.$error" ng-show="ic.form.path_hires.$touched">
                <p ng-message="required">This field is required.</p>
                <p ng-message="minlength">This field needs to contain min 4 digits.</p>
                <p ng-message="maxlength">This field needs to contain max 30 digits.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="path_lores">Thumbnail</label>
            <div class="col-sm-6 col-md-4">
                <input type="text" ng-model="ic.newImg.path_lores" class="form-control">
            </div>
            <div ng-messages="ic.form.path_lores.$error" ng-show="ic.form.path_lores.$touched">
                <p ng-message="required">This field is required.</p>
                <p ng-message="minlength">This field needs to contain min 4 digits.</p>
                <p ng-message="maxlength">This field needs to contain max 30 digits.</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="good">Agree terms?</label>
            <div class="col-sm-6 col-md-4">
                <input ng-model="data.check" type="checkbox" class="form-control" ng-change="data.text = !data.check ? '' : data.text">
            </div>
        </div>
        <button type="subbmit" class="btn btn-primary" ng-disabled="!data.check">Confirm add</button>
        <a class="btn btn-default" href="#/images"><i class="fa fa-chevron-left"></i>Back</a>
    </form>
</div>
</div>

这是我的测试应用程序的一部分,我得到了一些我无法解决的错误。 当我切换到images-add.html时,它会在我的json文件中创建一个新对象,它是最后一项,它的格式是{&#34; _id&#34;:null}。所有其他人都有&#34; id&#34; (不是&#34; _id&#34;)。

[{"id":"i1","title":"Gorillaz","album":"2014","description":"Gorillaz band wallpaper","path_hires":"slike/gallery/1.jpg","path_lores":"slike/thumbs/1.jpg"}, ... ,{"id":"i16","title":"Eau rouge","album":"2014","description":"Ayrton Senna comming to Eau rouge","path_hires":"slike/gallery/16.jpg","path_lores":"slike/thumbs/16.jpg"},{"_id":null}]

它不应该向json写任何东西,直到表单提交,并在提交后写入另一个_id:null。所以我试图解决它转发newImg对象以在add.service中添加函数,但我得到的只是在json末尾带有null id的字符串列表。

任何帮助将不胜感激。提前谢谢。

0 个答案:

没有答案