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>