ngoptions过滤

㈠ WEB专题---服务器对前端拦截过滤中需要特殊处理的OPTIONS请求

是否是跨域请求呢？
在网上找到了相关资料( http://www.cnblogs.com/sniper... ：
OPTIONS请求方法的主要用途有两个：
1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向判伏另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

fetch post修改了请求头,导致fetch第一发送戚巧一个options请掘仔携求，询问服务器是否支持修改的请求头，如过服务器支持，那么将会再次发送真正的请求。

处理方式 JAVA

COVER：
https://segmentfault.com/q/1010000008693779

㈡ angularjs用ng-options绑定select表单,怎么改变select表单中option的value值样式

是angularjs版本的问题，采用1.3.6版本。

㈢ angular怎么给option绑定事件

ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：

$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};

$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];

运行结果如：

为了美观一点，这里引用了bootstrap。

View Code

复杂对象，自定义列表名称

有的时候下拉列表并不是单纯的字符串数组，可能是json对象，例如：

$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "判兄Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

这个时候，绑定的数据就必须是与这里面的格式相同的数据，比如直接复制其中一条：

$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};

当然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循环列表拼接处下拉框的名称

<select
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" >
</select >

运行效果如：

全部的代码如下：

View Code

实现下拉列表的分组

其实分组与前面的例子很像，只要把空间中的ng-options的值换成下面：

<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" >
</select >

添加 group by 就会按照后面的值进行分组

全部代码：

View Code

按照id进行标识

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。

所以更多的时候会使用一个id进行标识，这样在初始化赋值的桐闹时候，只需要设定一个id就可以了。

$scope.engineer = {
currentActivityId: 3
};

$scope.activities =
[
{ id: 1, type: "Work" , name: "局冲罩Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

指令可以写成下面的格式

<select
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" >
</select >

㈣ angularjs中ng-options筛选功能怎么实现

js代码

/**
*带筛选功能的下拉框
*使用方法<selectngc-select-searchname="select1"ng-options="">
*说明[select一定要有name,ng-options属性]
*/
.directive('ngcSelectSearch',function($animate,$compile,$parse){

functionparseOptions(optionsExp,element,scope){
//ngOptions里的正则
varNG_OPTIONS_REGEXP=/^s*([sS]+?)(?:s+ass+([sS]+?))?(?:s+groups+bys+([sS]+?))?(?:s+disables+whens+([sS]+?))?s+fors+(?:([$w][$w]*)|(?:(s*([$w][$w]*)s*,s*([$w][$w]*)s*)))s+ins+([sS]+?)(?:s+tracks+bys+([sS]+?))?$/;

varmatch=optionsExp.match(NG_OPTIONS_REGEXP);
if(!(match)){
console.log('ng-options表达式有误')
}
varvalueName=match[5]||match[7];
varkeyName=match[6];
vardisplayFn=$parse(match[2]);
varkeyFn=$parse(match[1]);
varvaluesFn=$parse(match[8]);

varlabelArray=[],
idArray=[],
optionValues=[];
scope.$watch(match[8],function(newValue,oldValue){
if(newValue&&newValue.length>0){
optionValues=valuesFn(scope)||[];
labelArray=[];
idArray=[]
for(varindex=0,l=optionValues.length;index<l;index++){
varit=optionValues[index];
if(match[2]&&match[1]){
varlocalIt={};
localIt[valueName]=it;
贺郑肢varlabel=displayFn(scope,localIt);
禅世vardataId=keyFn(scope,localIt);
labelArray.push(label);
idArray.push(dataId);
}
}

scope.options={
'optionValues':optionValues,
'labelArray':labelArray,
'idArray':idArray
}
}
});
}
return{
restrict:'A',
require:['ngModel'],
priority:100,
replace:false,
scope:true,
template:'<divclass="chose-container">'+
'<divclass="chose-single"><spanclass="j-view"></span><iclass="glyphiconglyphicon-remove"></i></div>'+
'<divclass="chose-dropchose-hidej-drop">'+
'<divclass="chose-search">'+
'<inputclass="j-key"type="text"autocomplete="off">'+
'</div>'+
'<ulclass="chose-result">'+
//'<ling-repeat="'+repeatTempl+'"data-id="'+keyTempl+'"丛数>{{'+valueTempl+'}}</li>'+
'</ul>'+
'</div>'+
'</div>',
link:{
pre:functionselectSearchPreLink(scope,element,attr,ctrls){

vartmplNode=$(this.template).first();

varmodelName=attr.ngModel,
name=attr.name?attr.name:('def'+Date.now());
tmplNode.attr('id',name+'_chosecontianer');

$animate.enter(tmplNode,element.parent(),element);
},
post:functionselectSearchPostLink(scope,element,attr,ctrls){
varchoseNode=element.next();//$('#'+attr.name+'_chosecontianer');
choseNode.addClass(attr.class);
element.addClass('chose-hide');
//当前选中项
varngModelCtrl=ctrls[0];
if(!ngModelCtrl||!attr.name)return;

parseOptions(attr.ngOptions,element,scope);
varrs={};

functionsetView(){
varcurrentKey=ngModelCtrl.$modelValue;
if(isNaN(currentKey)||!currentKey){
currentKey='';
choseNode.find('.j-view:first').text('请选择');
choseNode.find('i').addClass('chose-hide');
}
if((currentKey+'').length>0){
for(vari=0,l=rs.idArray.length;i<l;i++){
if(rs.idArray[i]==currentKey){
choseNode.find('.j-view:first').text(rs.labelArray[i]);
choseNode.find('i').removeClass('chose-hide');
break;
}
}
}
}

functionsetViewAndData(){
if(!scope.options){
return;
}
rs=scope.options;
setView();
}
scope.$watchCollection('options',setViewAndData);
scope.$watch(attr.ngModel,setView);


functiongetListNodes(value){
varnodes=[];
value=$.trim(value);
for(vari=0,l=rs.labelArray.length;i<l;i++){
if(rs.labelArray[i].indexOf(value)>-1){
nodes.push($('<li>').data('id',rs.idArray[i]).text(rs.labelArray[i]))
}
}
returnnodes;

}
choseNode.on('keyup','.j-key',function(){
//搜索输入框keyup，重新筛选列表
varvalue=$(this).val();
choseNode.find('ul:first').empty().append(getListNodes(value));
returnfalse;
}).on('click',function(){
choseNode.find('.j-drop').removeClass('chose-hide');
if(choseNode.find('.j-view:first').text()!='请选择'){
choseNode.find('i').removeClass('chose-hide');
}
choseNode.find('ul:first').empty().append(getListNodes(choseNode.find('.j-key').val()));
returnfalse;
}).on('click','ul>li',function(){
var_this=$(this);
ngModelCtrl.$setViewValue(_this.data('id'));
ngModelCtrl.$render();
choseNode.find('.j-drop').addClass('chose-hide');
returnfalse;

}).on('click','i',function(){
ngModelCtrl.$setViewValue('');
ngModelCtrl.$render();
choseNode.find('.j-view:first').text('请选择');
returnfalse;

});
$(document).on("click",function(){
$('.j-drop').addClass('chose-hide');
choseNode.find('i').addClass('chose-hide');
returnfalse;
});

}
}
};
})

css代码(用less写的，以下是编译后的)

.chose-hide{
position:absolute!important;
top:-999em!important;
}
.chose-container{
border:none!important;
float:left;
margin-right:40px;
padding:0!important;
position:relative;
}
.chose-container.chose-single{
padding:6px12px;
color:#333;
width:100%;
border:1pxsolid#eee;
display:inline-block;
height:30px;
}
.chose-container.chose-single::after{
content:'';
position:absolute;
border-width:6px3px;
border-style:solid;
/*border-top-color:transparent;*/
border-left-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
right:8px;
top:12px;
}
.chose-container.chose-singlei{
width:12px;
float:right;
right:8px;
font-size:12px;
height:12px;
background-color:#eee;
}
.chose-container.chose-drop{
width:195px;
position:absolute;
border:1pxsolid#eee;
z-index:1000;
background-color:#fff;
}
.chose-container.chose-searchinput[type='text']{
margin:0;
padding-left:12px;
width:100%;
height:30px;
border:1pxsolid#ccc;
float:none;
}
.chose-container.chose-result{
max-height:370px;
overflow-y:scroll;
overflow-x:hidden;
}
.chose-container.chose-resultli{
padding:5px12px;
list-style-type:none;
}
.chose-container.chose-resultli:hover{
background-color:#e1e2e7;
}

1.3 使用及效果

<select ngc-select-search class="common-select" ng-model="aa.b" ng-options="obj.countryId as obj.countryCnName for obj in vm.countries" name="country">

<option value="">请选择</option>

</select>

㈤ angularjs $filter过滤器问题

推荐使用angular-ui-grid：
controller：
varapp=angular.mole('app',['ngTouch','ui.grid','ui.grid.pagination']);

app.controller('MainCtrl',['$scope','$http',function($scope,$http){
$scope.gridOptions1={
paginationPageSizes:[25,50,75],
paginationPageSize:25,
columnDefs:[
{name:'name'},
{name:'gender'},
{name:'company'}
]
};
}]);

html:
<divui-grid="gridOptions1"ui-grid-paginationclass="grid"></div>

㈥ angular的ng-model可以放过滤器吗

如果是angular自带的过滤器，可以。自定义的过滤器， 可以使用指令 require : ngModel然后通过设置$viewValue 来对显示的值做一些设置。
比如input的ngModel保存的为 date(), 显示的时候需要显示为HH:mm.这种情况。

㈦ ng-options怎么加value值

AngularJS 是一个神奇的东西，但学习过程中总会辩笑碰正颂到不少问题。

被ng-options的value设值问题困扰了不少时间，终于解决了，携清含这里记录一下。

设置model：

页面上的value还是0，1，2 但是控制台可以打印出我们要的值。

所以必须用Angular的取值方式而不是jQuery来取值，不然取值就不正确了。

㈧ angular的ng-model可以放过滤器吗

不可以的,这种情况下你想给数据格式化,最好使用指令,不过ng-value是可以用过滤器的.你试试

㈨ AngularJs怎么清空输入过滤结果

那你肯定不能把过滤写在html里
因为过滤器是不变的 而AngularJS是双向绑定 你要这样的话 过滤就只能写在JS里，这样才能更改

㈩ ng-bind-html过滤了style，怎么解决

ng-bind-html过滤了style的解决方法是引入$sce模块，具体使用如下：

$scope.docHtml= $sce.trustAsHtml(data);

这样就可以野早将值转换为特权所接受并能安全地使用“ng-bind-html”了。
1、完整代码使用如下：
<郑脊枣script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><喊拆/script>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.mole("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>