工作笔记之增加privilege属性

需求分析

本次需求主要涉及两个页面，分别为这两个页面增加一个privilege属性的radio按钮，最后把连同privilege属性的实体类保存到db中。
页面1：

这是一个弹出的模态框，增加一个privilege属性，并保存。
页面2：

这也是一个弹出的模态框，不过和页面1不同的是这里通过文件进行contact的批量导入。而页面1每次只导入一个contact信息。

技术难点分析

• 如何获取radio按钮的默认值。
• Angular UI之Modal怎么玩
• angular-file-upload的使用

实现

因为本次需求是主要是在modal对话框中完成的，因此，我们首先需要对AngularUI的modal对话框有一定的了解。

$uibModal

$uibModal is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using $uibModal.
The $uibModal service has only one method: open(options).

options parameter:

1. controller (Type: function|string|array, Example: MyModalController) - A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special $uibModalInstance injectable to access the modal instance.
2. resolve (Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.
3. scope (Type: $scope) - The parent scope instance to be used for the modal’s content. Defaults to $rootScope.
4. size (Type: string, Example: lg) - Optional suffix of modal window class. The value used is appended to the modal- class, i.e. a value of sm gives modal-sm.
5. template (Type: string) - Inline template representing the modal’s content.
6. templateUrl (Type: string) - A path to a template representing modal’s content. You need either a template or templateUrl.

return

The open method returns a modal instance, an object with the following properties:
1. close(result) (Type: function) - Can be used to close a modal, passing a result.
2. dismiss(reason) (Type: function) - Can be used to dismiss a modal, passing a reason.
3. result (Type: promise) - Is resolved when a modal is closed and rejected when a modal is dismissed.
4. opened (Type: promise) - Is resolved when a modal gets opened after downloading content’s template and resolving all variables.
5. closed (Type: promise) - Is resolved when a modal is closed and the animation completes.

取单选按钮的默认值

单选按钮的默认选中是public，但是如果一次也不点击直接去privilege的值的话会是一个空值。而如果你点击了private这样的非public按钮都是可以取到对应的值的，也就是默认选中的值并不能被我们取到，或者是现在我取默认的值得方法不对，因此，我给privilege赋予了初值public。这样就可以解决了取不到默认值的尴尬了。

FileUploader

• nv-file-select
  <input type="file" nv-file-select uploader="{FileUploader}"/>
  文件上传，我们第一步通常是在页面中加入文件选择控件，这里是在input标签中加入nv-file-select属性，它的值是选择的文件的位置。
  uploader指向的是FileUploader对象。

Properties

• url {String}: Path on the server to upload files
• queue {Array}: Items to be uploaded
• progress {Number}: Upload queue progress percentage. Read only.
• formData {Array}: Data to be sent along with the files
  queueLimit {Number} : maximum count of files

Methods

• addToQueue
  function(files[, options[, filters]]) {: Add items to the queue, where files is a {FileList|File|HTMLInputElement}, options is an {Object} and filters is a {String}.
• removeFromQueue
  function(value) {: Remove an item from the queue, where value is {FileItem} or index of item.
• clearQueue
  function() {: Removes all elements from the queue.
  uploadItem function(value) {: Uploads an item, where value is {FileItem} or index of item.
• cancelItem
  function(value) {: Cancels uploading of item, where value is {FileItem} or index of item.
• uploadAll
  function() {: Upload all pending items on the queue.
• cancelAll
  function() {: Cancels all current uploads.

Callbacks

• onCompleteItem
  function(item, response, status, headers) {: On file upload complete (independently of the sucess of the operation)
• onProgressAll
  function(progress) {: On upload queue progress
• onCompleteAll
  function() {: On all loaded when uploading an entire queue, or on file loaded when uploading a single independent file

FileItem

Properties

• url {String}: Path on the server in which this file will be uploaded
• formData {Array}: Data to be sent along with this file
• uploader {Object}: Reference to the parent Uploader object for this file. Read only.

Methods

• remove function() {: Remove this file from the queue
• upload function() {: Upload this file
• cancel function() {: Cancels uploading of this file

Callbacks

• onSuccess function(response, status, headers) {: On file - successfully uploaded
• onCancel function(response, status, headers) { - On cancel uploading
• onComplete function(response, status, headers) {: On file upload complete (independently of the sucess of the operation)
  我们在批量上传这个页面加入privilege时，就是对所有的contact设置相同的privilege属性。那么问题来了，这里的文件上传的请求在fileitem中upload方法时就已经提交了。因此，想在这个阶段加入privilege属性是不太可能了，那么我们可以这样FileUploader的属性url是可以改变的，因此我们可以将privilege属性加入到url后面。这也是在项目中，我采取的做法简单易用。但是，今天在总结这时，我发现fileUploader中还有一个formData属性，而且这个属性的解释就是随同file一起发送的数据，因此我们将privilege属性放在formData中肯定也是可行的，这个方法值得一试。
  前台的处理到目前为止，重要的环节已经打通了，后台无非就是一个数据保存的功能，就无需赘述了。