Angular-xeditable 入坑記

今天搞了搞這個東西。。不得不抱怨angular被牆的太厲害不過我還是要留下網址
http://vitalets.github.io/angular-xeditable/
這是API，藍燈一開，就可以去上去看看API了，不過是英文的，angular你還想看中文的麼，不要做夢了，所以爲了我自己以後能看中文的所以我就自己寫一篇筆記，這樣一些平常的功能我就不用去讀英文文檔了，省事了好多。道友們中文福利來啦~~

xeditable是什麼呢，是一款對錶格操作的插件，省去了我們自己去寫ng-model去雙向綁定數據，當然這只是其中的一點而已，來讓我們看看它的神奇吧

當然他也依賴一些庫，類似於Bootstrap 的CSS 當然有些功能也需要angular-ui bootstrap. ，在API可以知道需要加載什麼，其實全加進去就行，angular開發需要的插件還是不少的。

下載地址上面給出的官網或者bower下載 bower install angular-xeditable

在我們項目中使用

<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>

var app = angular.module("app", ["xeditable"]);
//這裏是設置主題，提供了應該是3中主題，在源碼的最後有興趣可以看一下。
app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

先是最簡單的

html

//自行加上ng-app才能在下面給出的網站運行
<div ng-controller="TextSimpleCtrl" id="TextSimpleCtrl">
  <a href="#" editable-text="user.name" e-label="User Name">{{ user.name || 'empty' }}</a>
</div>

controller.js

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});
//以上代碼之後省略了
app.controller('TextSimpleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});

http://jsfiddle.net/NfPcH/28/ 前端代碼在線演示的網站可以把代碼複製上去
這個代碼什麼意思呢，首先從html說起 editable-text=”user.name” 就是文本table中的文本本身就有雙向綁定不需要我們寫ng-model ，綁定的便是我們的user.name 至於controller只要學過angular都應該看得懂的，是不是提起興趣了~~~。接着上乾貨

demo2

<div ng-controller="SelectLocalCtrl">
  <a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>
</div>

app.controller('SelectLocalCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
});

這個就是當我們表格中需要有下拉框時我們需要的，editable-select=”user.status” select下拉菜單，雙向綁定了user.status
最坑的代碼來了e-ng-options=”s.value as s.text for s in statuses 這東西我整了好久才明白 - -||
這裏面 s.text是下拉框中的值，s.value是當我在下拉框選中後我給雙向綁定的值，也就是說我controller
user.status的值是s.value 是不是有點暈，去網站上一試就明白了~~~ controller裏的過濾器的意思也不是很難理解，對statuses進行過濾當其中的value等於user.status時取出來，因爲我們的user.status是我們雙向綁定的值所以我們可以通過它來鎖定我們需要的值在哪裏。之後將我們需要的值返回，這是比較難得一個地方，我覺得我解釋的還算好吧~大家勉強看看吧。

上面這個是本地數據，在實際項目中我們需要從後臺獲取數據~ 博主就在和java後臺合作~

<div ng-controller="SelectRemoteCtrl">
  <a href="#" editable-select="user.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
    {{ user.groupName || 'not set' }}
  </a>
</div>

app.controller('SelectRemoteCtrl', function($scope, $filter, $http) {
  $scope.user = {
    group: 4,
    groupName: 'admin' // original value
  }; 

  $scope.groups = [];

  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.$watch('user.group', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      $scope.user.groupName = selected.length ? selected[0].text : null;
    }
  });
});

其實和上一個差不多，只是在controller裏多了一些方法，我們來看看有什麼變化loadGroups裏就是一個http請求so easy不知道的可以百度谷歌下，這裏不說了 scope.$watch(‘user.group’, function(newVal, oldVal) 添加一個觀察的，當user.group裏的值變化時就執行，裏面的和上面的也差不多

官網還有許多零碎的東西類似於editable-checklist等等的，都大同小異沒什麼區別，就算是英文結合上面的代碼也不會有什麼障礙

剩下的涉及到後臺交互，也就是我們前臺給後臺傳數據，我們應該如何寫呢？
onbeforesave 和 onaftersave 的使用，表面意思就是在前臺保存前，在前臺保存後，使用方法都一樣，他們唯一的區別是，我們傳給後臺時使用onaftersave 因爲我們需要前臺先保存了值再傳給後臺，否則傳給後臺的值是之前的值。onbeforesave是用來設置驗證信息，確保信息正確。

<div ng-controller="OnaftersaveCtrl" id="OnaftersaveCtrl">
  <a href="#" editable-text="user.name" onaftersave="updateUser()">
    {{ user.name || 'empty' }}
  </a>
</div>

app.controller('OnaftersaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function() {
    return $http.post('/updateUser', $scope.user);
  };
});

華麗分割線——————————–
以上這些都是單獨一個的表格，涉及到整個表格的編輯或者某行的編輯我們該怎麼寫呢，官網給出了明確的例子

<div ng-controller="EditableRowCtrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:35%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>
      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button type="button" class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>

  <button type="button" class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

controller.js

app.controller('EditableRowCtrl', function($scope, $filter, $http) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
    angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

  // remove user
  $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

  // add user
  $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
    };
    $scope.users.push($scope.inserted);
  };
});

這段代碼很長我叫最重點的幾個陌生的東西myform.$show() myform是表單的名字相當於上面那些例子去點擊文本一樣，show讓我們的上面帶有的editable的以form標籤樣子顯示出來。我們可以在chrome下審查元素，觀察dom變化，‘saveUser( data, user.id)` $data的意思是所有的帶有editable的值，我們就通過這個獲得到值給後臺傳值。$visible ，我們一開始網站渲染是沒有顯示出form的，所以我們可以根據form是否顯示來顯示隱藏 $waiting博主也不是很懂，如果有道友明白希望能告知下

官網說e-required will not work since HTML5 validation only works if submitting a form with a submit button and editable-form submits via a script.
也就是說這個e-required html5出了驗證後就無法使用了。

好了看了上面的估計也不多可以使用插件了，再結合官網，敲代碼的熱情一觸即發是不是，來來來，搬磚吧。

小瘋瘋0413

發佈了83 篇原創文章 · 獲贊 68 · 訪問量 16萬+

私信關注

Angular-xeditable 入坑記

關於遊戲付費的一點想法

我通過CKA和CKS啦！

SQL讀書筆記（四）

每日一bootstrap 下拉菜單

node.js 異步I/O

SQL讀書筆記（十）創建和操縱表

操作系統筆記（二）操作系統類型

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結