angularJs ng-options指令详解

ng-options一般有以下用法及其详解

数组:

  •  label for value in array
  •  select as label for value in array
  •  label group by group for value in array
  •  label disable when disable for value in array
  •  label group by group for value in array track by trackexpr
  •  label disable when disable for value in array track by trackexpr
  •  label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对象:

  •  label for (key , value) in object
  •  select as label for (key ,value) in object
  •  label group by group for (key,value) in object
  •  label disable when disable for (key, value) in object
  •  select as label group by group for(key, value) in object
  •  select as label disable when disable for (key, value) in object

选中:

ng-options的选中方式是根据ng-model而决定的,假如我们的对象是:

[{“value”:0,”name”:”否”},{“value”:1,”name”:”是”}]

那么ng-model对应的就是:

{“value”:0,”name”:”否”} 或者是 {“value”:1,”name”:”是”} 对象。

一个例子:

//The html code.
<select class="form-control" ng-model="selected" ng-options="n.name for (i,n) in defaultContent" ng-change="change(selected)"></select>

 

//and the js code.

.controller("testController",function($scope){

    /**
     * selected value.
     * @type {string}
     */
    $scope.content = "0";

    /**
     * select options object.
     */
    $scope.defaultContent = JSON.parse('[{"value":0,"name":"否"},{"value":1,"name":"是"}]');

    /**
     * foreach defaultContent and found the selected object.
     */
    for(i in $scope.defaultContent){

        /**
         * if defaultContent[i].value equals content,than the selected object is defaultContent[i].
         */
        if($scope.defaultContent[i].value == parseInt($scope.content)){
            $scope.selected = $scope.defaultContent[i];
            break;
        }
    }
    $scope.change = function(obj){
        log(obj)
    }
})
  • defaultContent是我们默认的下拉选择框的对象数组。
  • content是下拉选择框选中value的值
  • 经过遍历数组,找出选中值的对应对象复制给新申明的选中对象selected。
  • html代码ng-model赋值selected就可以了。

解决spring mvc跨域的问题

java开发网站是很繁琐的事情,特别是写前端,每次运行都需要进行编译,所以需要配置跨域访问:

服务端

首先要创建一个CrossDomainFilter类,类继承了Servlet Filter接口,如下代码:

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by alan.luo on 2017/9/5.
 */
public class CrossDomainFilter extends Compact implements Filter {


    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {

        try {
            HttpServletRequest httpRequest = (HttpServletRequest) request;
            HttpServletResponse httpResponse = (HttpServletResponse) response;

            // 跨域
            String origin = httpRequest.getHeader("Origin");
            if (origin == null) {
                httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost/");

            } else {
                httpResponse.addHeader("Access-Control-Allow-Origin", origin);
            }
            httpResponse.addHeader("Access-Control-Allow-Headers", "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
            httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
            httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
            if ( httpRequest.getMethod().equals("OPTIONS") ) {
                httpResponse.setStatus(HttpServletResponse.SC_OK);
                return;
            }
            filterChain.doFilter(request, response);
        } catch (Exception e) {
            e.printStackTrace();
            throw e;
        }
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {
    }
}

类方法主要是配置response的响应信息,告诉客户端,可以传递什么及使用什么方法过来。

接下来就是配置xml文件,打开web.xml文件,在过滤代码中加入以下代码:

<!-- 允许跨域 -->
<filter>
    <filter-name>CrossDomainFilter</filter-name>
    <filter-class>com.test.com.CrossDomainFilter</filter-class>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CrossDomainFilter</filter-name>
    <url-pattern>/*</url-pattern><!-- 配置允许跨域访问的的url-pattern -->
</filter-mapping>

到这里服务器就已经配置完毕了。

客户端

客户端直接使用ajax发起请求就可以:

  /**
   * 发起ajax请求
   * @param url 请求地址
   * @param data 请求参数(object)对象
   * @param fnScuss 成功回调的函数
   * @param fnError 失败回调的函数
   * @returns {{get: get, post: post}}
   */
  ajax: function (url, data, fnScuss, fnError) {
      
      var _cacheKey = app.md5(url+JSON.stringify(data));
      var _cache = null;
      var _isCanCache = app.isCanCache(url);
      url = this.constant.DOMAIN + url;

      var http = function (method,header) {
          if (method == null){
              method = "POST";
          }
          if(header == null){
              header = new Object();
          }
     
          $.ajax({
              url: url,
              data: data,
              dataType: "json",
              type: method,
              headers: header,
      beforeSend: function(xhr) {
         xhr.withCredentials = true;
      },
      crossDomain:true,
              success: function (e) {

                  if (typeof fnScuss == "function") {
                      //储存缓存
                      if (e.code == "1" && _isCanCache == true){
                          //app.cache.set(_cacheKey,e)
                      }
                      fnScuss(e);
                  }
              },
              error: function (e) {
                  if (typeof fnError == "function") {
                      fnError(e);
                  }
              }

          })
      };

      return {
          get: function () {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }

              http("GET");
          },
          post: function (isJson) {
              //缓存判断
              if (_isCanCache == true){
                  _cache = app.cache.get(_cacheKey)
                  if (_cache != null && typeof fnScuss == "function"){
                      fnScuss(_cache);
                      return true;
                  }
              }
              var header = new Object();
              if (isJson == true){
                  header['Content-Type'] = "application/json";
              }
              http("POST",header);
          },
          delete:function () {
              http("DELETE");
          },
          put:function () {
              http("PUT");
          }
      }

  },

 

app.event("#getToken", "click", function () {
    app.ajax("/project/api/getToken", {type:"1"}, function (e) {
        app.log(e);
        if (e.code == 1) {
            
        }
    }).post();
});

java web开发图片上传&虚拟目录配置

最近使用java开发一个APP应用的管理系统后台,涉及到编辑信息上传图片的功能,这里使用了UE编辑器,国产的;

UE上传图片的功能集成在了一个叫做image.js的文件中:

/*
 * 本地上传
 * */
var Upload = {
    showCount: 0,
    uploadTpl: '<div class="edui-image-upload%%">' +
        '<span class="edui-image-icon"></span>' +
        '<form class="edui-image-form" method="post" enctype="multipart/form-data" target="up">' +
        '<input style=\"filter: alpha(opacity=0);\" class="edui-image-file" type="file" hidefocus name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>' +
        '</form>' +

        '</div>',
    init: function (editor, $w) {
        var me = this;

        me.editor = editor;
        me.dialog = $w;
        me.render(".edui-image-local", 1);
        me.config(".edui-image-upload1");
        me.submit();
        me.drag();

        $(".edui-image-upload1").hover(function () {
            $(".edui-image-icon", this).toggleClass("hover");
        });

        if (!(UM.browser.ie && UM.browser.version <= 9)) {
            $(".edui-image-dragTip", me.dialog).css("display", "block");
        }


        return me;
    },
    render: function (sel, t) {
        var me = this;

        $(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));

        return me;
    },
    config: function (sel) {
        var me = this,
            url=me.editor.options.imageUrl;

        url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;

        $("form", $(sel, me.dialog)).attr("action", url);

        return me;
    },
    uploadComplete: function(r){
        var me = this;
        //这里使用一个过滤的方法,java后台返回的是json数据,但是到这里发现有<pre>的标签;
        log(r)
        if(r.indexOf("</pre>") > 0){
            var _start = r.indexOf(">") + 1;
            var _end = r.indexOf("<",_start);
            r = r.substring(_start,_end);
            log(r)
        }
        //过滤结束

        try{
            var json = eval('('+r+')');
            //这里调用了callback的方法,第3个参数是传递过去的图片地址,由服务器返回;
            //第4个参数是服务器返回的状态码
            Base.callback(me.editor, me.dialog, json.data.url, json.code);
        }catch (e){
            var lang = me.editor.getLang('image');
            Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
        }
    }}

图片上传成功,调用了callback的方法处理图片,需要作小小的改动:

callback: function (editor, $w, url, code) {
     //这里做了小小的改动,原代码是判断success字符串,由于我的Java返回的是一个类似于{code:1,error:error}对象,所以我改成了int类型作为判断,之后的代码都不需要操作了。
    if (code == 1) {
        //显示图片计数+1
        Upload.showCount++;
        var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
            $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

        if ($(".edui-image-upload2", $w).length < 1) {
            $(".edui-image-content", $w).append($item);

            Upload.render(".edui-image-content", 2)
                .config(".edui-image-upload2");
        } else {
            $(".edui-image-upload2", $w).before($item).show();
        }

        $img.on("load", function () {
            Base.scale(this, 120);
            Base.close($(this));
            $(".edui-image-content", $w).focus();
        });

    } else {
        currentDialog.showTip( code );
        window.setTimeout( function () {

            currentDialog.hideTip();

        }, 3000 );
    }

    Upload.toggleMask();

}

接下来就是映射tomcat虚拟目录,在tomcat的目录下找到conf目录:

/home/apache-tomcat-8.0.45/conf/Catalina/localhost

在localhost目录下创建一个xml文件,文件的名字会与url的路径同步,所以取名字要注意点,假如你创建了一个

upload.xml的文件,里面的内容是:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–文件名跟url路径需保持一致–>
<!–如果文件名:upload.xml,那么你访问的url地址应该是:http://ip:port/upload/images…. –>
<!–http://localhost:8081/upload/images/20170901/1504228001551.jpg–>
<Context
docBase=”/upload”
reloadable=”true”>
</Context>

那么你访问这个目录下的资源时,url应该输入:

http://ip:port/upload/resrouce

 

angularJs分页对象实现

首先需要使用指令(directives),然后共享socpe对象即可,html里输入:

<div class="pages">
    <page-html page="{{pageData.page}}" pageTotal="{{pageData.pageTotle}}" method="read"></page-html>
</div>

directives文件中创建pageHtml指令:

.directive("pageHtml",function () {
    return{
        restrict:'EA',
        replace:true,
        link:function (scope,ele,attr,ctrl) {
            scope.initPage = function(){
                scope.pages = [];
                if(typeof scope.pageData == "object" && scope.pageData.pageTotle > 1){
                    var i = scope.pageData.page;
                    i -= 2;
                    if(i < 1){
                        i = 1
                    }
                    for(;i <= scope.pageData.pageTotle; i++){
                        scope.pages.push(i)
                        if(scope.pages.length >= 5){
                            break;
                        }
                    }
                }
            }
            scope.initPage()
        },
        controller: function ($scope, $element, $attrs) {

            var _method = $attrs.method
            $scope.selectPage = function(page){
                if(page == "pre"){
                    if($scope.pageData.page > 1){
                        $scope.pageData.page--;
                        page = $scope.pageData.page;
                    }
                }else if(page == "next"){
                    if($scope.pageData.page < $scope.pageData.pageTotle){
                        $scope.pageData.page++;
                        page = $scope.pageData.page;
                    }
                }else{
                    $scope.pageData.page = page;
                }
                if($scope.pageData.page > 0 && $scope.pageData.page <= $scope.pageData.pageTotle){
                    $scope.initPage()
                    if(typeof _method  == "string"){
                        $scope[_method](page);
                    }else{
                        $scope.read(page);
                    }
                }
            }
        },
        template: '<nav ng-if="pageData.pageTotle > 1"><ul class="pagination">' +
        '<li><a class="disabled cursor-pointer" ng-click="selectPage(\'pre\')"><span aria-hidden="true">上一页</span></a></li>' +
        '<li ng-repeat="(i,n) in pages track by i" ng-click="selectPage(n)" class="cursor-pointer {{n == pageData.page ? \'active\': \'\'}}"><a>{{n}}</a></li>'+
        '<li><a class="Previous cursor-pointer" ng-click="selectPage(\'next\')"><span aria-hidden="true">下一页</span></a></li>' +
        '</ul></nav>'
    }
})

一个简单的分页效果就出来了。

 

H5设计一个简单的在线编辑器

上面的代码,就是编辑器的代码,把对象直接绑定到window对象中,方便调用;

接下来,就是实现了,首先我们需要一个DOM对象来绑定编辑器:

\<\div class=\"contentEditable\"\>\<\/div\>
自己新建了一个div,这里最好使用ID,本人是测试,所以懒;

然后调用编辑器对象的init方法,初始化编辑器;

editorUtils.init(document.getElementsByClassName(\”contentEditable\”)[0]);
init的方法,主要是设置编辑器的高度宽度,已经class样式,继承绑定对象的属性,我只写了一个class绑定,之后就把绑定对象隐藏起来;

然后大功告成了,现在可以编辑内容了,我们来看一下截图:

1236

关于深蓝

仅仅是一个对编程很有爱好的人.
Copyright © 2008-2016 lanxinbase.com Rights Reserved. | 粤ICP备14086738号 |