AngularJS教程十—— 下拉選單

ed-combobox普通下拉選項和ed-combotree下拉樹選單

一、ed-combobox普通下拉選單：

<select class="form-control" ed-combobox ng-model="deptId"
    data-options="idField: 'deptId', textField: 'deptName', url: 'department/tree.do'"></select>

ed-combobox僅支援單選，通過data-options來設定屬性值：

• idField返回json中的id標示
• textField返回json中的name標示
• url請求url

二、ed-combotree下拉樹選單：

<div ed-combotree ed-multiple="false" ed-key="parentDeptId,deptId,deptName" ed-data="depts"
    ng-model="user.dept" placeholder="請選擇"></div>

<div ed-combotree data-options="idField: 'deptId', textField: 'deptName', parentIdField: 'parentDeptId', url: 'department/tree.do'"
                 ng-model="dept" placeholder="請選擇"></div>

ed-combotree：定義樹形下拉選單

• 通過data-options設定的屬性：

  • multiple：單選還是多選，預設false單選
  • idField返回json中的id標示
  • textField返回json中的name標示
  • parentIdField：返回json中父id標示
  • url：指定獲取資料的URL地址，如果指定了ed-data將會忽略該屬性
  • original：設定其他ztree原生的屬性，比如設定多選時是否級聯選擇，可通過：original: {check:{chkStyle: 'checkbox', chkboxType: {'Y': '', 'N': '' }}

• ed-data：樹的資料，從controller的$scope中獲取

• ed-selectable：設定某些節點是否能夠選擇，這個屬性指定當前頁面controller裡面的一個方法：ed-selectable="selectable(data)"，返回true|false，方法名稱可以隨意，引數固定為data；如果不指定該方法，則認為所有節點都能夠選擇

ed-combotree返回值

如果ng-model最後一個小數點後面部分與idField或parentIdField相同，返回選取的id或ids字串拼接，否則返回選取的item或item陣列

ed-combotree下拉樹賦值

設定ng-model指定的model的值即可，單選情況下只需指定value，多選需指定jsonarray，如示例：

單選：$scope.user.dept = '5'

多選：$scope.user.dept = [{deptId: '5'}, {deptId: '6'}] 或$scope.user.dept = '5,6'

三、新增change事件

新增對ng-model指定的model的$watch，如示例：

$scope.$watch('user.dept', function(newValue, oldValue) {

});