AngularJS. Отключить генерацию, запись в ng-модели

Question

AngularJS. Отключить генерацию, запись в ng-модели

0

Я начал изучать AngulartJS. Я пытаюсь переделать пример, но у меня есть некоторые проблемы. После изучения кода я не мог понять две вещи:
1) Как хранит person и свойства: например person.email. Я пытаюсь в ng-model change contacts.selectedPerson.email to contacts.selectedPerson.surname, после этого печатать person.surname, но ничего не отпускает.
2) Программа генерирует случайные строки в таблицу. Я хочу отключить его, но я не вижу эту функцию в коде. Архив: проект
admin.html:

<div class="container news" >

    <toaster-container ></toaster-container >

    <div class="row" >
                            <div id="status"></div>
        <div class="col-md-8"
             ng-controller="PersonListController" >
            <div class="row" >
                <div class="col-md-12" >
                    <form class="form-inline well well-sm" >
                        <span class="fa fa-search" ></span >

                        <div class="form-group" >
                            <input type="text"
                                   class="form-control"
                                   id="name"
                                   ng-model="search"
                                   placeholder="Search name..."
                                    />
                        </div >

                        <span class="fa fa-sort" ></span >

                        <div class="form-group" >
                            <select class="form-control"
                                    ng-model="order" >
                                <option value="name" >Name (ASC)</option >
                                <option value="-name" >Name (DEC)</option >
                                <option value="email" >Surname (ASC)</option >
                                <option value="-email" >Surname (DEC)</option >
                            </select >
                        </div >

                        <button class="btn btn-primary pull-right"
                                ng-click="showCreateModal()" >Create
                        </button >

                    </form >

                    <table class="table table-bordered"
                           infinite-scroll="loadMore()"
                           infinite-scroll-immediate-check="false"
                           infinite-scroll-distance="1" >

                        <tr >
                            <th class="col-1">#</th >
                            <th class="col-2">
                                <div class="sortables" >
                                    <span ng-click="order = 'name'"
                                          class="fa fa-sort-asc" ></span >
                                    <span ng-click="order = '-name'"
                                          class="fa fa-sort-desc" ></span >
                                </div >
                                Name
                            </th >
                            <th class="col-3">
                                <div class="sortables" >
                                    <span ng-click="order = 'email'"
                                          class="fa fa-sort-asc" ></span >
                                    <span ng-click="order = '-email'"
                                          class="fa fa-sort-desc" ></span >
                                </div >
                                Surname
                            </th >
                            <th class="col-4">Club</th >
                        </tr >

                        <tr ng-repeat="person in contacts.persons"
                            ng-style="{
                             'background-color': person.email == contacts.selectedPerson.email ? 'lightgray' : ''
                        }"
                            ng-click="contacts.selectedPerson = person" >
                            <td >
                                <img ng-src="{{person.photo | defaultImage:'./avatar.png' }}"
                                     class="img-circle profile-photo"
                                     alt="" />
                            </td >
                            <td >{{ person.name }}</td >
                            <td >{{ person.email }}</td >
                            <td >{{ person.phonenumber }}</td >
                        </tr >


                    </table >

                    <div ng-show="contacts.persons.length == 0 && !contacts.isLoading" >
                        <div class="alert alert-danger" >
                            <p class="text-center" >No results found for search term '{{ search }}'</p >
                        </div >
                    </div >

                    <div class="spinner"
                         ng-show="contacts.isLoading" >
                        <span us-spinner="{radius:8, width:5, length: 3, lines:9}" ></span >

                        <p >Loading...</p >
                    </div >

                </div >
            </div >

        </div >
        <div class="col-md-4"
             ng-controller="PersonDetailController" >

            <div class="panel panel-default" >
                <div class="panel-heading" >Details

                    <button class="btn btn-danger btn-sm pull-right"
                            onclick="ajax_post('my_delete_file.php');"
                            ng-click="remove()" >Delete
                    </button >
                    <div class="clearfix" ></div >

                </div >
                <div class="panel-body" >
                    <form class="form-horizontal"
                          ng-submit="save()"
                          novalidate >

                          <ng-include src="'templates/form.html'" ></ng-include >

                    </form >
                </div >
            </div >
        </div >
    </div >                     
</div >

form.html:

<div class="form-group" >
    <label class="col-sm-2 control-label" >Sign</label >
    <div class="col-sm-10" >
        <input type="text"
               id="sign"
               name="country"
               class="form-control"
               ng-model="contacts.selectedPerson.country"
               required
                />
    </div >

</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Name</label >
    <div class="col-sm-10" >
        <input type="text"
               id="player"
               class="form-control"
               name="name"
               ng-model="contacts.selectedPerson.name"
               required />
    </div >
</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Surname</label >
    <div class="col-sm-10" >
        <input type="text"
               id="surname"
               name="phone"
               class="form-control"
               ng-model="contacts.selectedPerson.email"
               required
                />
    </div >

</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Club</label >
    <div class="col-sm-10" >
        <input type="text"
               id="club"
               name="city"
               class="form-control"
               ng-model="contacts.selectedPerson.phonenumber"
               required
                />
    </div >

</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Photo</label >
    <div class="col-sm-10" >
        <input type="text"
               class="form-control"
               name="photo"
               id="photo"
               ng-model="contacts.selectedPerson.photo"
                />
    </div >
</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Birthday</label >
    <div class="col-sm-10" >
        <input type="text"
               id="date"
               name="bday"
               class="form-control"
               ng-model="contacts.selectedPerson.birthdate "
               bs-datepicker
               required
                />
    </div >

</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Position</label >
    <div class="col-sm-10" >
        <input type="text"
               id="position"
               name="email"
               class="form-control"
               ng-model="contacts.selectedPerson.city"
               required
                />
    </div >
</div >
<div class="form-group" >
    <label class="col-sm-2 control-label" >Nation</label >
    <div class="col-sm-10" >
        <input type="text"
               id="nation"
               name="address"
               class="form-control"
               ng-model="contacts.selectedPerson.address"
               required
                />
    </div >

</div >
<div class="buttons" >
    <button class="btn btn-primary btn-block"
            onclick="ajax_post('my_parse_file.php');"
            type="submit" >Save
    </button >
</div >

admin.js:

var app = angular.module('codecraft', [
    'ngResource',
    'infinite-scroll',
    'angularSpinner',
    'jcs-autoValidate',
    'angular-ladda',
    'mgcrea.ngStrap',
    'toaster',
    'ngAnimate'
]);

app.config(function ($httpProvider, $resourceProvider, laddaProvider, $datepickerProvider) {
    $httpProvider.defaults.headers.common['Authorization'] = 'Token 20002cd74d5ce124ae219e739e18956614aab490';
    $resourceProvider.defaults.stripTrailingSlashes = false;
    laddaProvider.setOption({
        style: 'expand-right'
    });
    angular.extend($datepickerProvider.defaults, {
        dateFormat: 'd/M/yyyy',
        autoclose: true
    });
});

app.factory("Contact", function ($resource) {
    return $resource("https://codecraftpro.com/api/samples/v1/contact/:id/", {id: '@id'}, {
        update: {
            method: 'PUT'
        }
    });
});


app.filter('defaultImage', function () {

    return function (input, param) {
        console.log(input);
        console.log(param);
        if (!input) {
            return param;
        }
        return input;
    };

});

app.controller('PersonDetailController', function ($scope, ContactService) {
    $scope.contacts = ContactService;


    $scope.save = function () {
        $scope.contacts.updateContact($scope.contacts.selectedPerson)
    };

    $scope.remove = function () {
        $scope.contacts.removeContact($scope.contacts.selectedPerson)
    }
});

app.controller('PersonListController', function ($scope, $modal, ContactService) {

    $scope.search = "";
    $scope.order = "email";
    $scope.contacts = ContactService;

    $scope.loadMore = function () {
        console.log("Load More!!!");
        $scope.contacts.loadMore();
    };

    $scope.showCreateModal = function () {
        $scope.contacts.selectedPerson = {};
        $scope.createModal = $modal({
            scope: $scope,
            template: 'templates/modal.create.tpl.html',
            show: true
        })
    };

    $scope.createContact = function () {
        console.log("createContact");
        $scope.contacts.createContact($scope.contacts.selectedPerson)
            .then(function () {
                $scope.createModal.hide();
            })
    };

    $scope.$watch('search', function (newVal, oldVal) {
        if (angular.isDefined(newVal)) {
            $scope.contacts.doSearch(newVal);
        }
    });

    $scope.$watch('order', function (newVal, oldVal) {
        if (angular.isDefined(newVal)) {
            $scope.contacts.doOrder(newVal);
        }
    })

});

app.service('ContactService', function (Contact, $q, toaster) {


    var self = {
        'addPerson': function (person) {
            this.persons.push(person);
        },
        'page': 1,
        'hasMore': true,
        'isLoading': false,
        'isSaving': false,
        'selectedPerson': null,
        'persons': [],
        'search': null,
        'doSearch': function (search) {
            self.hasMore = true;
            self.page = 1;
            self.persons = [];
            self.search = search;
            self.loadContacts();
        },
        'doOrder': function (order) {
            self.hasMore = true;
            self.page = 1;
            self.persons = [];
            self.ordering = order;
            self.loadContacts();
        },
        'loadContacts': function () {
            if (self.hasMore && !self.isLoading) {
                self.isLoading = true;

                var params = {
                    'page': self.page,
                    'search': self.search,
                    'ordering': self.ordering
                };

                Contact.get(params, function (data) {
                    console.log(data);
                    angular.forEach(data.results, function (person) {
                        self.persons.push(new Contact(person));
                    });

                    if (!data.next) {
                        self.hasMore = false;
                    }
                    self.isLoading = false;
                });
            }

        },
        'updateContact': function (person) {
            console.log("Service Called Update");
            self.isSaving = true;
            person.$update().then(function () {
                self.isSaving = false;
                toaster.pop('success', 'Updated ' + person.name);
            });
        },
        'removeContact': function (person) {
            self.isDeleting = true;
            person.$remove().then(function () {
                self.isDeleting = false;
                var index = self.persons.indexOf(person);
                self.persons.splice(index, 1);
                self.selectedPerson = null;
                toaster.pop('success', 'Deleted ' + person.name);
            });
        },
        'createContact': function (person) {
            var d = $q.defer();
            self.isSaving = true;
            Contact.save(person).$promise.then(function () {
                self.isSaving = false;
                self.selectedPerson = null;
                self.hasMore = true;
                self.page = 1;
                self.persons = [];
                self.loadContacts();
                toaster.pop('success', 'Created ' + person.name);
                d.resolve()
            });
            return d.promise;
        }


    };

    self.loadContacts();

    return self;

});

Vyacheslav Martynenko 02 нояб. 2015, в 10:00

Источник

1

Вставьте все это в jsfiddler, и ссылку!
Valentin Roudge 02 нояб. 2015, в 08:57

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Вставьте все это в jsfiddler, и ссылку!

Shohel · Accepted Answer · 2015-11-02T08-37-00.000Z

Change ng-model="contacts.selectedPerson.email" to ng-model="contacts.selectedPerson.surname" into form.html
Change <td >{{ person.email }}</td > to <td >{{ person.surname }}</td > на admin.html
Изменить person.email == contacts.selectedPerson.email to person.surname == contacts.selectedPerson.surname' в admin.html
Если вы хотите фамилию вместо электронной почты, тогда вы должны установить ниже строки в loadContacts методы admin.js

person.surname = person.email;

self.persons.push(new Contact(person));

Для скрытия таблицы прокомментируйте эту строку с admin.js

self.persons.push(new Contact(person)); //hide table genration

Привет, если я прокомментирую self.persons.push(new Contact(person)); Я не буду иметь результаты в таблице, но я хочу отключить только автоматически сгенерированные результаты.
HI, данные по умолчанию берутся из этого api codecraftpro.com/api/samples/v1/contact/:id . есть ли у вас API, если да, вы можете установить здесь свой API или статический код. Я думаю, что вы должны изучить основы, прежде чем начать большой проект. Пожалуйста, смотрите ссылку, я думаю, что ваша концепция будет понятна отсюда codeproject.com/Articles/832288/…
Пожалуйста, нажмите этот ответ полезен. Большое спасибо вам.