ng-quick 是一个 AngularJS 的快速开发工具集，提供了许多能简化开发流程的指令和组件。
本教程将带领大家了解如何使用 ng-quick 来快速搭建一个视图背景选择器，以及如何在开发过程中使用 ng-quick 中的指令和组件。
步骤一：安装 ng-quick
安装 ng-quick 非常简单，只需在命令行中运行以下命令即可：
npm install ng-quick --save
步骤二：创建一个视图背景选择器
我们将使用 ng-quick 中的 qqBackgroundSelector 指令来创建一个视图背景选择器。首先，在 HTML 文件中添加以下代码：
<div qq-background-selector ng-model="bgSelected"></div>
我们定义了一个 bgSelected 变量来保存用户选择的背景，这个变量会在后面的步骤中用到。现在，当用户点击背景选择器时，会弹出一个背景选择框。
步骤三：创建一个背景列表
我们需要一个背景列表来让用户选择背景，这个列表可以通过在控制器中定义一个背景数组来创建：
-- -------------------- ---- -------
----------------------- ------------
--------------------- ---------------- -
------------------ - -
------ ------- ---- ------------------------------------
------ -------- ---- -------------------------------------
------ ------ ---- -----------------------------------
------ --------- ---- -------------------------------------
--
---现在我们还需要告诉 qqBackgroundSelector 指令使用哪个背景列表，修改 HTML 中的代码如下：
<div qq-background-selector ng-model="bgSelected" backgrounds="backgrounds"></div>
现在，当用户点击背景选择器时，会弹出一个包含四个背景选项的选择框。
步骤四：实现自定义背景
我们可以允许用户上传自己的图片作为背景。为此，我们需要在 HTML 中添加一个上传按钮，并添加一个方法来将上传图片转换为 URL。
<input type="file" onchange="angular.element(this).scope().uploadBg(this)">
$scope.uploadBg = function(input) {
var reader = new FileReader();
reader.onload = function(e) {
$scope.backgrounds.push({name: input.files[0].name, url: e.target.result});
$scope.$apply();
}
reader.readAsDataURL(input.files[0]);
};现在，用户可以上传自己的背景图片了。
步骤五：完整代码
-- -------------------- ---- -------
---- -----------------------
---- ---------------------- --------------------- --------------------------------
------ ----------- --------------------------------------------------------
------
------- --------------------------------------------------------------------------------------
------- ----------------------------------------------------------
--------
----------------------- ------------
--------------------- ---------------- -
------------------ - -
------ ------- ---- ------------------------------------
------ -------- ---- -------------------------------------
------ ------ ---- -----------------------------------
------ --------- ---- -------------------------------------
--
--------------- - --------------- -
----- ------ - --- -------------
- ------------- - ----------- -
- ------------------------------ -------------------- ---- ------------------
- ----------------
- -
- -------------------------------------
---
---
---------总结
本文简单介绍了如何使用 ng-quick 来创建一个视图背景选择器。除此之外，ng-quick 中的指令和组件还能用于快速开发表单、图表、表格等网页组件。只要掌握了它们的使用方法，开发过程将变得更加高效快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ffe81e8991b448ddcdb