这里有新鲜出炉的 AngularJS Tutorial 中文版,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 Angular.JS 中实现无限级联动菜单的使用示例,本文是在之前的一篇文章的基础上进行的几个 demo 分享,有需要的朋友可以参考借鉴,下面来一起看看吧。
前言
之前给大家介绍过一篇关于 AngularJS 中实现无限级联动菜单的文章,但没来得及和大家分享使用的示例,下面这篇文章就来给大家分享下几个使用的 demo。
文中包括 demo 如下:
1. 同步加载子选项 demo
2. 异步加载子选项 demo
3. 初始值回填 demo
4. 倒金字塔依赖 demo
注意:在阅读本文前请先移步上一篇文章:/article/17/0216/267545.html
1. 同步加载子选项
在各联动菜单加载之前,我们已经通过某种方式(比如后端渲染、api 依赖、deferred 依赖等等)拿到了渲染各级菜单所需的各种数据,我们只需要将该数据处理为
- [{
- text: 'some text',
- value: 'some value'
- },
- ]
的形式,并封装成数据源函数即可。以省 - 市联动为例:
html 部分:
注意第二个 select 中声明了
,以此实现联动
- dependents="province"
- <select multi-level-select source="getProvinces" name="province" ng-model="form.province"
- empty="请选择省份">
- </select>
- <select multi-level-select source="getCities" name="city" ng-model="form.city"
- empty="请选择城市" dependents="province">
- </select>
controller 部分:
预处理数据,提供数据源函数
- controller('myCtrl', ['$scope',
- function($scope) {
- // angular使用好习惯,将primitive值放到对象上
- var form = {};
- $scope.form = form;
- var data = [{
- name: '浙江',
- id: 10,
- cities: [{
- name: '杭州',
- id: 100
- },
- {
- name: '宁波',
- id: 101
- },
- {
- name: '温州',
- id: 102
- }]
- },
- {
- name: '广东',
- id: 20,
- cities: [{
- name: '广州',
- id: 200
- },
- {
- name: '深圳',
- id: 201
- },
- {
- name: '佛山',
- id: 202
- }]
- },
- {
- name: '山东',
- id: 30,
- cities: [{
- name: '济南',
- id: 301
- },
- {
- name: '青岛',
- id: 302
- },
- {
- name: '烟台',
- id: 303
- }]
- }];
- var provinces = [];
- var citiesLookup = {};
- // 预处理,返回[{text: 'some text', value: 'some value'},]的数据格式
- $.each(data,
- function(index, province) {
- provinces.push({
- text: province.name,
- value: province.id
- });
- var cities = [];
- $.each(province.cities,
- function(index, city) {
- cities.push({
- text: city.name,
- value: city.id
- });
- });
- citiesLookup[province.id] = cities;
- });
- $scope.getProvinces = function() {
- return provinces;
- };
- $scope.getCities = function(values) {
- return citiesLookup[values.province] || [];
- };
- }]);
2. 异步加载子选项 demo
主要差异是数据源函数应该返回 promise 实例(AngularJS 中使用 $q 即可)。为了演示方便,这里就不用 $http 了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样。
和上一个例子非常相似,只需要将两个数据源函数修改为:
- $scope.getProvinces = function() {
- return $q(function(resolve) {
- // 异步时应返回promise,这里就不用http了,除了预处理(由使用者自己的业务逻辑负责)外,完全一样
- // 如果需要缓存,也请在这里自己负责
- $timeout(function() {
- resolve(provinces);
- },
- 100);
- });
- };
- $scope.getCities = function(values) {
- return $q(function(resolve) {
- $timeout(function() {
- resolve(citiesLookup[values.province] || []);
- },
- 100);
- });
- };
3. 初始值回填
因为在开发初期这个需求就很明确了,所以使用上不需要做额外的工作,如果有初始值,只需要在 controller 中为其赋值即可:
- // angular使用好习惯,将primitive值放到对象上
- var form = {};
- $scope.form = form;
- form.province = 30;
- form.city = 301;
4. 倒金子塔依赖
依赖声明是通过由逗号分割的字符串的形式完成的,使用上非常方便。
设想以下的场景:
教务处需要学生对课程进行评价,学生先选择周几,再选择时间,然后再选择具体的课程下拉框
周几和时间之间互不依赖,课程下拉框同时依赖于周几和时间,换言之,一旦周几和时间中的任意一个改变,课程下拉框就应该更新。
html 部分:
注意第三个 select 的 dependents 属性是 day,hour,即同时依赖于 day 和 hour
- <select multi-level-select source="getDays" name="day" ng-model="form.day"
- empty="请选择周几">
- </select>
- <select multi-level-select source="getHours" name="hour" ng-model="form.hour"
- empty="请选择时间">
- </select>
- <select multi-level-select source="getCourses" name="course" ng-model="form.course"
- empty="请选择课程" dependents="day,hour">
- </select>
controller 部分:
和前面的例子类似,没有什么特殊的,预处理数据并提供数据源函数即可。
- controller('myCtrl',
- function($scope) {
- var form = {};
- $scope.form = form;
- $scope.getDays = function() {
- var days = '一二三'.split('');
- days.forEach(function(item, index) {
- days[index] = {
- text: '星期' + item,
- value: '星期' + item
- };
- });
- return days;
- };
- $scope.getHours = function() {
- return [{
- text: '09:00-12:00',
- value: '1'
- },
- {
- text: '14:00-17:00',
- value: '2'
- }];
- };
- var courses = {
- '星期一': {
- '1': [{
- value: '数学',
- text: '数学'
- },
- {
- value: '精读',
- text: '精读'
- }],
- '2': [{
- value: '足球',
- text: '足球'
- }]
- },
- '星期二': {
- '1': [{
- value: '听力',
- text: '听力'
- }],
- '2': [{
- value: '数学',
- text: '数学'
- }]
- },
- '星期三': {
- '1': [{
- value: '计算机',
- text: '计算机'
- }],
- '2': [{
- value: '游泳',
- text: '游泳'
- },
- {
- value: '古汉语',
- text: '古汉语'
- }]
- },
- };
- $scope.getCourses = function(values) {
- if (!values.day || !values.hour) {
- return [];
- }
- return courses[values.day][values.hour];
- };
- });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0429/327919.html