AngularJS ng-repeat对使用controllerAs

时间:2016-05-02 21:45:04

标签: angularjs ng-repeat

在这里完成Angular新手。我在这里托管了应用https://bitbucket.org/builtbyvern/ultimate-angularjs-course/src并且一直在关注教程。我让我使用controllerAs重构应用程序。

应用确实有效,直到我点击ng-repeat。没有错误返回...只是注释了ng-repeat:

<!-- ngRepeat: classified in vm.classifieds -->

代码如下,但可以随意查看bitbucket链接。

<md-card flex="30" ng-repeat="classified in vm.classifieds | filter:classifiedsFilter | filter:category" class="classified">
  ...
<md-card>

控制器:

(function(){

    "use strict"; 

    angular
        .module('ngClassifieds')
        .controller('classifiedsCtrl', function($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog, $stateParams) {

            // vm for view model
            var vm = this;

            vm.openSidebar = openSidebar;
            vm.closeSidebar = closeSidebar;
            vm.saveClassified = saveClassified;
            vm.editClassified = editClassified;
            vm.saveEdit = saveEdit;
            vm.deleteClassified = deleteClassified;

            vm.classifieds;
            vm.categories;
            vm.editing;
            vm.classified;


            classifiedsFactory.getClassifieds().then(function(classifieds) {
                vm.classifieds = classifieds.data;
                vm.categories = getCategories(vm.classifieds);
            });

            var contact = {
                name: "Vern",
                phone: '208.283.6343',
                email: 'vernworldwide@gmail.com'
            }



            function openSidebar() {
                $mdSidenav('left').open();
            }

            function closeSidebar() {
                $mdSidenav('left').close();
            }

            function saveClassified(classified) {
                if (classified) {
                    classified.contact = contact;
                    vm.classifieds.push(classified);
                    vm.classified = {};
                    vm.closeSidebar();
                    showToast('Classified Saved!');
                }
            }

            function editClassified(classified) {
                vm.editing = true;
                openSidebar();
                vm.classified = classified;
            }

            function saveEdit(classified) {
                vm.editing = false;
                vm.classified = {};
                closeSidebar();
                showToast("Edit Saved!");
            }

            function deleteClassified(event, classified) {
                var confirm = $mdDialog.confirm()
                    .title('Are your sure you want to delete ' +  classified.title + '?')
                    .ok("Yep")
                    .cancel('Nope').
                    targetEvent(event);
                $mdDialog.show(confirm).then(function(){
                    var index = vm.classifieds.indexOf(classified);
                    vm.classifieds.splice(index, 1);
                }, function(){

                });


            }

            function showToast(message){
                $mdToast.show(
                    $mdToast.simple()
                        .content(message)
                        .position('top, right')
                        .hideDelay(3000)
                );
            }

            function getCategories(classifieds) {
                var categories = [];

                angular.forEach(classifieds, function(item) {
                    angular.forEach(item.categories, function(category){
                        categories.push(category);
                    });
                });

                return _.uniq(categories);
            }


        });

})();

当然还有配置

angular
    .module("ngClassifieds",['ngMaterial', 'ui.router'])
    .config(function($mdThemingProvider, $stateProvider) {
        $mdThemingProvider.theme('default')
            .primaryPalette('teal')
            .accentPalette('orange');

        $stateProvider
            .state('classifieds', {
                url: '/classifieds',
                templateUrl: 'components/classifieds/classifieds.tpl.html',
                controllerAs: 'classifiedsCtrl as vm'
            });
    });

0 个答案:

没有答案