使用Angularjs指令可以封装一些通用的组件可以被不同的模块间共用。
在表单中我们习惯用一个对象去绑定所有的表项。
<ham-select-search datas="vm.action.selectOpts" value="vm.cache.currentItem.location"></ham-select-search>在上面的代码中我们定义了一个简单的指令，从指令中可以看出，这个指令的属性有两个，一个datas，一个value.
datas：为我们绑定的下拉数组，这个数组一般是通过后台请求获取的，形如
vm.action.selectOpts = ["1111111","111111222222","22222222","33333","44444","555555"];value：为我们绑定的对象属性，在实际操作时，我们会将选择的值直接赋值给vm.cache.currentItem.location（这其实就是一个对象的属性）。
那我们大概知道我们需要封装什么样的指令了，他至少包含我们的两个属性。
angular.
module('am.guest.manager')
.directive('hamSelectSearch', hamSelectOptionsDirective);
function hamSelectOptionsDirective() {
return {
restrict: 'AE', //attribute or element
scope: {
datas: '=',
value: '='
},
template: ''
// replace: true,
link: function ($scope, elem, attr, ctrl) {
}
};
}那么我们接下来就需要去生成我们的输入框和下拉框的模板。我这里面有一些封装的样式和校验，这个不需要理会。
angular.
module('am.guest.manager')
.directive('hamSelectSearch', hamSelectOptionsDirective);
function hamSelectOptionsDirective() {
return {
restrict: 'AE', //attribute or element
scope: {
datas: '=',
value: '='
//bindAttr: '='
},
template: '<input type = "test" style="width:100%" class="form-control" ng-change="changeKeyValue(value)"' +
' ng-model="value" style = "display:block;" ' +
'ng-click = "hidden=!hidden" value="{{value}}"/></input>' +
'<div ng-hide="hidden" style="z-index:-1">' +
' <select style = "width:100%" ng-change="change(x)" ng-model="x" multiple>' +
' <option ng-repeat="data in datas" >{{data}}</option>' +
' </select>' +
'</div>',
// replace: true,
link: function ($scope, elem, attr, ctrl) {
}
};
}我们知道封装的指令在模板中定义的事件我们需要单独去处理，那我我们可以使用其link方法来实现。
不过需要一点逻辑处理才能将我们的应用跑起来。
当用户输入的时候我们除了去后台获取数据(当然你也可以在其他的位置处理数据的问题)之外，还需要将隐藏的下拉框显示出来，同时根据用户输入的值进行模糊匹配，匹配出符合规则的数据。当用户删除时，我们需要做特殊的处理，就是输入值为空则显示全部的数据信息。
angular.
module('am.guest.manager')
.directive('hamSelectSearch', hamSelectOptionsDirective);
function hamSelectOptionsDirective() {
return {
restrict: 'AE', //attribute or element
scope: {
datas: '=',
value: '='
//bindAttr: '='
},
template: '<input type = "test" style="width:100%" class="form-control" ng-change="changeKeyValue(value)"' +
' ng-model="value" style = "display:block;width:200px" ' +
'ng-click = "hidden=!hidden" value="{{value}}"/></input>' +
'<div ng-hide="hidden" style="z-index:-1">' +
' <select style = "width:100%" ng-change="change(x)" ng-model="x" multiple>' +
' <option ng-repeat="data in datas" >{{data}}</option>' +
' </select>' +
'</div>',
// replace: true,
link: function ($scope, elem, attr, ctrl) {
$scope.tempdatas = $scope.datas; //a temp array to store the datas
$scope.hidden = true;//show ot hide the select
$scope.value = '';//the data user input
//set the value of selected value to input
$scope.change = function (x) {
console.log("x",x);
$scope.value = x[0];
$scope.hidden = true;
}
//compare the input value to data array.If the temp array contains the input value . put it to newData and set it to $scope.datas
//If no compare , will set the $scope.datas = $scope.tempdatas
$scope.changeKeyValue = function (v) {
var newData = []; //temp array
angular.forEach($scope.tempdatas, function (data, index, array) {
if (data.indexOf(v) >= 0) {
newData.unshift(data);
}
});
//replace the temp to resource array
$scope.datas = newData;
//下拉选展示
$scope.hidden = false;
//if input value is null , reset the $scope.datas
if ('' == v) {
$scope.datas = $scope.tempdatas;
}
console.log($scope.datas);
}
}
};
}那么我们在使用时就可以展现出想要的效果。
看一下值有没有正常赋值成功
