我开始学习AngulartJS。我正在尝试重新制作一个示例，但是我遇到了一些问题。学习代码后，我无法理解两件事：
1）person和属性的存储方式：例如person.email。我尝试在ng-model中将contacts.selectedPerson.email更改为contacts.selectedPerson.surname，然后打印person.surname，但没有任何回报。
2）程序正在生成随机字符串到表中。我想禁用它，但是我在代码中看不到此功能。
存档：project
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;
});
最佳答案
Change ng-model="contacts.selectedPerson.email" to ng-model="contacts.selectedPerson.surname" into form.htmlChange <td >{{ person.email }}</td > to <td >{{ person.surname }}</td >进入admin.html
将person.email == contacts.selectedPerson.email更改为person.surname == contacts.selectedPerson.surname'进入admin.html
如果要姓而不是电子邮件，则必须在admin.js的loadContacts方法中设置以下行person.surname = person.email;self.persons.push(new Contact(person));
为了隐藏表格，请在admin.js中注释此行
self.persons.push(new Contact(person)); //hide table genration
关于javascript - AngularJS。禁用生成，以ng-model编写，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33473751/