Commit a468667f248901c82d54b9972b251ae211ac7dd8
1 parent
dd962f77
优化
Showing
10 changed files
with
83 additions
and
39 deletions
Show diff stats
build/Form/Form.js
| ... | ... | @@ -25,7 +25,11 @@ angular.module("esNgAntd").directive("esForm", function (esNgAntd) { |
| 25 | 25 | |
| 26 | 26 | $scope.resetFields = function () { |
| 27 | 27 | $scope.state.formItems.forEach(function (item) { |
| 28 | - item.value = null; | |
| 28 | + if (typeof item.setValue === "function") { | |
| 29 | + item.setValue(item.defaultValue || null); | |
| 30 | + } else { | |
| 31 | + item.value = null; | |
| 32 | + } | |
| 29 | 33 | }); |
| 30 | 34 | }; |
| 31 | 35 | ... | ... |
build/Pagination/Pagination.html
| ... | ... | @@ -14,10 +14,10 @@ |
| 14 | 14 | </li> |
| 15 | 15 | <li class="ant-pagination-options"> |
| 16 | 16 | <es-select ng-if="showSizeChanger==='true'" class="ant-pagination-options-size-changer" value="10" get-popup-container="getPopupContainer" on-change="handleSelectChange(value)"> |
| 17 | - <es-option value="10">10 条/页</es-option> | |
| 18 | - <es-option value="20">20 条/页</es-option> | |
| 19 | - <es-option value="30">30 条/页</es-option> | |
| 20 | - <es-option value="40">40 条/页</es-option> | |
| 17 | + <es-select-option value="10">10 条/页</es-select-option> | |
| 18 | + <es-select-option value="20">20 条/页</es-select-option> | |
| 19 | + <es-select-option value="30">30 条/页</es-select-option> | |
| 20 | + <es-select-option value="40">40 条/页</es-select-option> | |
| 21 | 21 | </es-select> |
| 22 | 22 | <div ng-if="showQuickJumper==='true'" class="ant-pagination-options-quick-jumper"> |
| 23 | 23 | 跳至<input type="text" onBlur="handleBlur($event)" />页 | ... | ... |
build/Select/Select.html
build/Select/Select.js
| ... | ... | @@ -10,6 +10,7 @@ angular |
| 10 | 10 | replace: true, |
| 11 | 11 | scope: { |
| 12 | 12 | value: "@", |
| 13 | + defaultValue: "@", | |
| 13 | 14 | placeholder: "@", |
| 14 | 15 | onChange: "&", |
| 15 | 16 | placeholder: "@", |
| ... | ... | @@ -25,10 +26,25 @@ angular |
| 25 | 26 | open: false, |
| 26 | 27 | childrens: [], |
| 27 | 28 | label: null, |
| 28 | - value: null, | |
| 29 | + value: $scope.value || $scope.defaultValue, | |
| 29 | 30 | popup: null, |
| 30 | 31 | }; |
| 31 | 32 | |
| 33 | + $scope.setValue = function (value) { | |
| 34 | + let option = $scope.state.childrens.find(function (option) { | |
| 35 | + return option.value === value; | |
| 36 | + }); | |
| 37 | + | |
| 38 | + if (option) { | |
| 39 | + option.label = option.element.text(); | |
| 40 | + $scope.state.label = option.label; | |
| 41 | + $scope.state.value = option.value; | |
| 42 | + } else { | |
| 43 | + $scope.state.label = null; | |
| 44 | + $scope.state.value = null; | |
| 45 | + } | |
| 46 | + }; | |
| 47 | + | |
| 32 | 48 | $scope.addOption = function (option) { |
| 33 | 49 | $scope.state.childrens.push(option); |
| 34 | 50 | }; |
| ... | ... | @@ -134,16 +150,19 @@ angular |
| 134 | 150 | ) { |
| 135 | 151 | let [esForm, esFormItem] = $controllers; |
| 136 | 152 | esNgAntd.createStyle("ant-select", style); |
| 137 | - $scope.esForm = esForm.getContext(); | |
| 138 | - $scope.esFormItem = esFormItem.getContext(); | |
| 139 | - $scope.esForm.state.formItems.push($scope); | |
| 140 | - let option = $scope.state.childrens.find(function (option) { | |
| 141 | - return option.value === $scope.value; | |
| 142 | - }); | |
| 143 | - | |
| 144 | - if (option) { | |
| 145 | - $scope.state.label = option.label; | |
| 153 | + | |
| 154 | + if (esForm) { | |
| 155 | + $scope.esForm = esForm.getContext(); | |
| 156 | + $scope.esForm.state.formItems.push($scope); | |
| 146 | 157 | } |
| 158 | + | |
| 159 | + if (esFormItem) { | |
| 160 | + $scope.esFormItem = esFormItem.getContext(); | |
| 161 | + } | |
| 162 | + | |
| 163 | + $timeout(function () { | |
| 164 | + $scope.setValue($scope.value || $scope.defaultValue); | |
| 165 | + }, 100); | |
| 147 | 166 | }, |
| 148 | 167 | }; |
| 149 | 168 | }); | ... | ... |
dist/ng-antd.js
| ... | ... | @@ -346,7 +346,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Row |
| 346 | 346 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 347 | 347 | |
| 348 | 348 | "use strict"; |
| 349 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Select_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select.html */ \"./build/Select/Select.html\");\n/* harmony import */ var antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/select/style/index.css */ \"./node_modules/antd/lib/select/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esSelect\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esSelect\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n placeholder: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Select_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n open: false,\n childrens: [],\n label: null,\n value: null,\n popup: null,\n };\n\n $scope.addOption = function (option) {\n $scope.state.childrens.push(option);\n };\n\n $scope.handleClick = function (option) {\n $scope.state.open = !$scope.state.open;\n $scope.state.label = option.label;\n $scope.state.value = option.value;\n $scope.onChange({\n value: $scope.state.value,\n });\n };\n\n $scope.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let func = $scope.getPopupContainer();\n\n if (typeof func === \"function\" && func() !== undefined) {\n return {\n top: $element[0].offsetTop,\n left: $element[0].offsetLeft,\n };\n } else {\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left:\n rect.left + window.pageXOffset - doc.clientLeft,\n };\n }\n };\n\n $scope.myEvent = function () {\n $timeout(() => {\n $scope.state.open = false;\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleBlur = function () {\n // 事件绑定\n document.body.addEventListener(\"click\", $scope.myEvent);\n };\n\n $scope.handleOpen = function (event) {\n event.stopPropagation();\n const { height, width } =\n $element[0].getBoundingClientRect();\n const { top, left } = $scope.getOffset($element[0]); // 处理标签\n\n $scope.state.childrens.forEach(function (item) {\n item.label = item.element.text();\n });\n let div = document.createElement(\"div\");\n div.style.position = \"absolute\";\n div.style.left = 0;\n div.style.top = 0;\n div.style.width = \"100%\";\n div.appendChild(\n $compile(`<div><div ng-class=\"'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')\" style=\"width: ${width}px; left: ${left}px; top: ${\n top + height + 2\n }px;\">\n <div class=\"ant-select-item ant-select-item-option\" ng-click=\"handleClick(option)\" ng-repeat=\"option in state.childrens\">\n <div class=\"ant-select-item-option-content\">{{option.label}}</div>\n </div>\n </div></div>`)($scope)[0]\n );\n\n if ($scope.state.popup === null) {\n let func = $scope.getPopupContainer();\n\n if (\n typeof func === \"function\" &&\n func() !== undefined\n ) {\n $element[0].style.position = \"relative\";\n $scope.getPopupContainer()().appendChild(div);\n } else {\n document.body.appendChild(div);\n }\n\n $scope.state.popup = div;\n }\n\n $scope.state.open = !$scope.state.open;\n $scope.handleBlur();\n };\n },\n require: [\"?^esForm\", \"?^esFormItem\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [esForm, esFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-select\", antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.esForm = esForm.getContext();\n $scope.esFormItem = esFormItem.getContext();\n $scope.esForm.state.formItems.push($scope);\n let option = $scope.state.childrens.find(function (option) {\n return option.value === $scope.value;\n });\n\n if (option) {\n $scope.state.label = option.label;\n }\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.js?"); | |
| 349 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Select_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Select.html */ \"./build/Select/Select.html\");\n/* harmony import */ var antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/select/style/index.css */ \"./node_modules/antd/lib/select/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esSelect\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esSelect\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n onChange: \"&\",\n placeholder: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Select_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n open: false,\n childrens: [],\n label: null,\n value: null,\n popup: null,\n };\n\n $scope.addOption = function (option) {\n $scope.state.childrens.push(option);\n };\n\n $scope.handleClick = function (option) {\n $scope.state.open = !$scope.state.open;\n $scope.state.label = option.label;\n $scope.state.value = option.value;\n $scope.onChange({\n value: $scope.state.value,\n });\n };\n\n $scope.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let func = $scope.getPopupContainer();\n\n if (typeof func === \"function\" && func() !== undefined) {\n return {\n top: $element[0].offsetTop,\n left: $element[0].offsetLeft,\n };\n } else {\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left:\n rect.left + window.pageXOffset - doc.clientLeft,\n };\n }\n };\n\n $scope.myEvent = function () {\n $timeout(() => {\n $scope.state.open = false;\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleBlur = function () {\n // 事件绑定\n document.body.addEventListener(\"click\", $scope.myEvent);\n };\n\n $scope.handleOpen = function (event) {\n event.stopPropagation();\n const { height, width } =\n $element[0].getBoundingClientRect();\n const { top, left } = $scope.getOffset($element[0]); // 处理标签\n\n $scope.state.childrens.forEach(function (item) {\n item.label = item.element.text();\n });\n let div = document.createElement(\"div\");\n div.style.position = \"absolute\";\n div.style.left = 0;\n div.style.top = 0;\n div.style.width = \"100%\";\n div.appendChild(\n $compile(`<div><div ng-class=\"'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')\" style=\"width: ${width}px; left: ${left}px; top: ${\n top + height + 2\n }px;\">\n <div class=\"ant-select-item ant-select-item-option\" ng-click=\"handleClick(option)\" ng-repeat=\"option in state.childrens\">\n <div class=\"ant-select-item-option-content\">{{option.label}}</div>\n </div>\n </div></div>`)($scope)[0]\n );\n\n if ($scope.state.popup === null) {\n let func = $scope.getPopupContainer();\n\n if (\n typeof func === \"function\" &&\n func() !== undefined\n ) {\n $element[0].style.position = \"relative\";\n $scope.getPopupContainer()().appendChild(div);\n } else {\n document.body.appendChild(div);\n }\n\n $scope.state.popup = div;\n }\n\n $scope.state.open = !$scope.state.open;\n $scope.handleBlur();\n };\n },\n require: [\"?^esForm\", \"?^esFormItem\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [esForm, esFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-select\", antd_lib_select_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if (esForm) {\n $scope.esForm = esForm.getContext();\n $scope.esForm.state.formItems.push($scope);\n }\n\n if (esFormItem) {\n $scope.esFormItem = esFormItem.getContext();\n }\n\n $timeout(function () {\n let option = $scope.state.childrens.find(function (option) {\n return option.value === $scope.value;\n });\n\n if (option) {\n option.label = option.element.text();\n $scope.state.label = option.label;\n }\n }, 100);\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.js?"); | |
| 350 | 350 | |
| 351 | 351 | /***/ }), |
| 352 | 352 | |
| ... | ... | @@ -9606,7 +9606,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac |
| 9606 | 9606 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 9607 | 9607 | |
| 9608 | 9608 | "use strict"; |
| 9609 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul class=\\\"ant-pagination\\\">\\n <li ng-class=\\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\\" ng-click=\\\"handlePrev()\\\">\\n <button type=\\\"button\\\" class=\\\"ant-pagination-item-link\\\">\\n <es-icon type=\\\"LeftOutlined\\\"></es-icon>\\n </button>\\n </li>\\n <li ng-repeat=\\\"value in state.pageNumList\\\" ng-class=\\\"'ant-pagination-item'+(state.current===value?' ant-pagination-item-active':'')\\\" ng-click=\\\"handleClick(value)\\\">\\n <a>{{value}}</a>\\n </li>\\n <li ng-class=\\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\\" ng-click=\\\"handleNext()\\\">\\n <button type=\\\"button\\\" class=\\\"ant-pagination-item-link\\\">\\n <es-icon type=\\\"RightOutlined\\\"></es-icon>\\n </button>\\n </li>\\n <li class=\\\"ant-pagination-options\\\">\\n <es-select ng-if=\\\"showSizeChanger==='true'\\\" class=\\\"ant-pagination-options-size-changer\\\" value=\\\"10\\\" get-popup-container=\\\"getPopupContainer\\\" on-change=\\\"handleSelectChange(value)\\\">\\n <es-option value=\\\"10\\\">10 条/页</es-option>\\n <es-option value=\\\"20\\\">20 条/页</es-option>\\n <es-option value=\\\"30\\\">30 条/页</es-option>\\n <es-option value=\\\"40\\\">40 条/页</es-option>\n </es-select>\n <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n 跳至<input type=\\"text\\" onBlur=\\"handleBlur($event)\\" />页\n </div>\n </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); | |
| 9609 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<ul class=\\\"ant-pagination\\\">\\n <li ng-class=\\\"'ant-pagination-prev'+(state.current===1?' ant-pagination-disabled':'')\\\" ng-click=\\\"handlePrev()\\\">\\n <button type=\\\"button\\\" class=\\\"ant-pagination-item-link\\\">\\n <es-icon type=\\\"LeftOutlined\\\"></es-icon>\\n </button>\\n </li>\\n <li ng-repeat=\\\"value in state.pageNumList\\\" ng-class=\\\"'ant-pagination-item'+(state.current===value?' ant-pagination-item-active':'')\\\" ng-click=\\\"handleClick(value)\\\">\\n <a>{{value}}</a>\\n </li>\\n <li ng-class=\\\"'ant-pagination-next'+(state.current===state.pageNum?' ant-pagination-disabled':'')\\\" ng-click=\\\"handleNext()\\\">\\n <button type=\\\"button\\\" class=\\\"ant-pagination-item-link\\\">\\n <es-icon type=\\\"RightOutlined\\\"></es-icon>\\n </button>\\n </li>\\n <li class=\\\"ant-pagination-options\\\">\\n <es-select ng-if=\\\"showSizeChanger==='true'\\\" class=\\\"ant-pagination-options-size-changer\\\" value=\\\"10\\\" get-popup-container=\\\"getPopupContainer\\\" on-change=\\\"handleSelectChange(value)\\\">\\n <es-select-option value=\\\"10\\\">10 条/页</es-select-option>\\n <es-select-option value=\\\"20\\\">20 条/页</es-select-option>\\n <es-select-option value=\\\"30\\\">30 条/页</es-select-option>\\n <es-select-option value=\\\"40\\\">40 条/页</es-select-option>\n </es-select>\n <div ng-if=\\"showQuickJumper==='true'\\" class=\\"ant-pagination-options-quick-jumper\\">\n 跳至<input type=\\"text\\" onBlur=\\"handleBlur($event)\\" />页\n </div>\n </li>\n</ul>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Pagination/Pagination.html?"); | |
| 9610 | 9610 | |
| 9611 | 9611 | /***/ }), |
| 9612 | 9612 | |
| ... | ... | @@ -9672,7 +9672,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac |
| 9672 | 9672 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 9673 | 9673 | |
| 9674 | 9674 | "use strict"; |
| 9675 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div class=\\\"ant-select ant-select-single\\" ng-click=\\"handleOpen($event)\\">\n <div class=\\"ant-select-selector\\">\n <span class=\\"ant-select-selection-item\\">{{state.label}}</span>\n </div>\n <span class=\\"ant-select-arrow\\">\n <es-icon type=\\"DownOutlined\\"></es-icon>\n </span>\n <span hidden ng-transclude></span>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.html?"); | |
| 9675 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div class=\\\"ant-select ant-select-single ant-select-show-arrow\\" ng-click=\\"handleOpen($event)\\">\n <div class=\\"ant-select-selector\\">\n <span class=\\"ant-select-selection-item\\">{{state.label}}</span>\n </div>\n <span class=\\"ant-select-arrow\\">\n <es-icon type=\\"DownOutlined\\"></es-icon>\n </span>\n <span hidden ng-transclude></span>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Select/Select.html?"); | |
| 9676 | 9676 | |
| 9677 | 9677 | /***/ }), |
| 9678 | 9678 | ... | ... |
example/select.html
| ... | ... | @@ -7,8 +7,8 @@ |
| 7 | 7 | <body> |
| 8 | 8 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
| 9 | 9 | <div class="container" style="padding: 50px"> |
| 10 | - <es-select style="width: 200px;" on-change="handleChange(value)" placeholder="请选择..."> | |
| 11 | - <es-select-option value="aaa" ng-repeat="value in options">{{value}}</es-select-option> | |
| 10 | + <es-select style="width: 200px;" value="AAA" on-change="handleChange(value)" placeholder="请选择..."> | |
| 11 | + <es-select-option value="{{value}}" ng-repeat="value in options">{{value}}</es-select-option> | |
| 12 | 12 | </es-select> |
| 13 | 13 | </div> |
| 14 | 14 | </div> | ... | ... |
src/Form/Form.js
| ... | ... | @@ -15,7 +15,7 @@ class Form { |
| 15 | 15 | }; |
| 16 | 16 | |
| 17 | 17 | state = { |
| 18 | - formItems: [] | |
| 18 | + formItems: [], | |
| 19 | 19 | }; |
| 20 | 20 | |
| 21 | 21 | constructor() { |
| ... | ... | @@ -34,8 +34,12 @@ class Form { |
| 34 | 34 | |
| 35 | 35 | resetFields() { |
| 36 | 36 | this.state.formItems.forEach(function (item) { |
| 37 | - item.value = null; | |
| 38 | - }) | |
| 37 | + if (typeof item.setValue === "function") { | |
| 38 | + item.setValue(item.defaultValue || null); | |
| 39 | + } else { | |
| 40 | + item.value = null; | |
| 41 | + } | |
| 42 | + }); | |
| 39 | 43 | } |
| 40 | 44 | |
| 41 | 45 | handleSubmit() { |
| ... | ... | @@ -44,7 +48,7 @@ class Form { |
| 44 | 48 | let name = item.esFormItem && item.esFormItem.name; |
| 45 | 49 | let value = item.value || item.state.value || null; |
| 46 | 50 | values[name] = value; |
| 47 | - }) | |
| 51 | + }); | |
| 48 | 52 | // for (let i = 0; i < inputs.length; i++) { |
| 49 | 53 | // const element = inputs[i]; |
| 50 | 54 | // const value = element.value === "" ? null : element.value; | ... | ... |
src/Pagination/Pagination.html
| ... | ... | @@ -16,10 +16,10 @@ |
| 16 | 16 | </li> |
| 17 | 17 | <li className="ant-pagination-options"> |
| 18 | 18 | {showSizeChanger === 'true' && <es-select className="ant-pagination-options-size-changer" value="10" get-popup-container="getPopupContainer" on-change="handleSelectChange(value)"> |
| 19 | - <es-option value="10">10 条/页</es-option> | |
| 20 | - <es-option value="20">20 条/页</es-option> | |
| 21 | - <es-option value="30">30 条/页</es-option> | |
| 22 | - <es-option value="40">40 条/页</es-option> | |
| 19 | + <es-select-option value="10">10 条/页</es-select-option> | |
| 20 | + <es-select-option value="20">20 条/页</es-select-option> | |
| 21 | + <es-select-option value="30">30 条/页</es-select-option> | |
| 22 | + <es-select-option value="40">40 条/页</es-select-option> | |
| 23 | 23 | </es-select>} |
| 24 | 24 | {showQuickJumper === 'true' && <div className="ant-pagination-options-quick-jumper"> |
| 25 | 25 | 跳至<input type="text" onBlur="handleBlur($event)" />页 | ... | ... |
src/Select/Select.html
| 1 | -<div className="ant-select ant-select-single" onClick={this.handleOpen.bind(this, $event)}> | |
| 1 | +<div className="ant-select ant-select-single ant-select-show-arrow" onClick={this.handleOpen.bind(this, $event)}> | |
| 2 | 2 | <div className="ant-select-selector"> |
| 3 | 3 | <span className="ant-select-selection-item">{state.label}</span> |
| 4 | 4 | </div> | ... | ... |
src/Select/Select.js
| 1 | 1 | import template from "./Select.html"; |
| 2 | 2 | import style from "antd/lib/select/style/index.css"; |
| 3 | 3 | |
| 4 | - | |
| 5 | 4 | class Select { |
| 6 | - | |
| 7 | 5 | useModules = ["$compile", "$timeout", "esNgAntd"]; |
| 8 | 6 | |
| 9 | 7 | props = { |
| 10 | 8 | value: String, |
| 9 | + defaultValue: String, | |
| 11 | 10 | placeholder: String, |
| 12 | 11 | onChange: Function, |
| 13 | 12 | placeholder: String, |
| ... | ... | @@ -18,7 +17,7 @@ class Select { |
| 18 | 17 | open: false, |
| 19 | 18 | childrens: [], |
| 20 | 19 | label: null, |
| 21 | - value: null, | |
| 20 | + value: this.props.value || this.props.defaultValue, | |
| 22 | 21 | popup: null, |
| 23 | 22 | }; |
| 24 | 23 | |
| ... | ... | @@ -26,14 +25,30 @@ class Select { |
| 26 | 25 | |
| 27 | 26 | constructor(esForm, esFormItem) { |
| 28 | 27 | esNgAntd.createStyle("ant-select", style); |
| 29 | - this.esForm = esForm.getContext(); | |
| 30 | - this.esFormItem = esFormItem.getContext(); | |
| 31 | - this.esForm.state.formItems.push($scope); | |
| 28 | + if (esForm) { | |
| 29 | + this.esForm = esForm.getContext(); | |
| 30 | + this.esForm.state.formItems.push($scope); | |
| 31 | + } | |
| 32 | + if (esFormItem) { | |
| 33 | + this.esFormItem = esFormItem.getContext(); | |
| 34 | + } | |
| 35 | + | |
| 36 | + $timeout(function () { | |
| 37 | + this.setValue(this.props.value || this.props.defaultValue); | |
| 38 | + }, 100); | |
| 39 | + } | |
| 40 | + | |
| 41 | + setValue(value) { | |
| 32 | 42 | let option = this.state.childrens.find(function (option) { |
| 33 | - return option.value === this.props.value; | |
| 43 | + return option.value === value; | |
| 34 | 44 | }); |
| 35 | 45 | if (option) { |
| 46 | + option.label = option.element.text(); | |
| 36 | 47 | this.state.label = option.label; |
| 48 | + this.state.value = option.value; | |
| 49 | + } else { | |
| 50 | + this.state.label = null; | |
| 51 | + this.state.value = null; | |
| 37 | 52 | } |
| 38 | 53 | } |
| 39 | 54 | |
| ... | ... | @@ -90,7 +105,7 @@ class Select { |
| 90 | 105 | // 处理标签 |
| 91 | 106 | this.state.childrens.forEach(function (item) { |
| 92 | 107 | item.label = item.element.text(); |
| 93 | - }) | |
| 108 | + }); | |
| 94 | 109 | |
| 95 | 110 | let div = document.createElement("div"); |
| 96 | 111 | div.style.position = "absolute"; |
| ... | ... | @@ -98,7 +113,9 @@ class Select { |
| 98 | 113 | div.style.top = 0; |
| 99 | 114 | div.style.width = "100%"; |
| 100 | 115 | div.appendChild( |
| 101 | - $compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${top + height + 2}px;"> | |
| 116 | + $compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${ | |
| 117 | + top + height + 2 | |
| 118 | + }px;"> | |
| 102 | 119 | <div class="ant-select-item ant-select-item-option" ng-click="handleClick(option)" ng-repeat="option in state.childrens"> |
| 103 | 120 | <div class="ant-select-item-option-content">{{option.label}}</div> |
| 104 | 121 | </div> | ... | ... |