如何在angular js中创建多列组合框
how to create a muticolumn combo box in angular js
我想要一个两个字段name和shade。这两个字段应显示为当我点击一个下拉列表时。当我从网格中选择一行时,只有名称才应该绑定到下拉列表https://demos.devexpress.com/ASPxEditorsDemos/ASPxComboBox/MultiColumn.aspx下面是我的代码
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.myColor = $scope.colors[2]; // red
}]);
</script>
<div ng-controller="ExampleController">
<span >
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span>
</div>
您可以尝试使用此新指令:注意:此答案基于您的参考链接。
(function(){
var app = angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.colors = [
{ name: 'black', shade: 'dark' },
{ name: 'white', shade: 'light' },
{ name: 'red', shade: 'dark' },
{ name: 'blue', shade: 'dark' },
{ name: 'yellow', shade: 'light' }
];
$scope.myColor = $scope.colors[2];
// red
}]);
app.directive('dropdown', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
list: '=dropdown',
ngModel: '=',
selectedKey: '=',
dropHeader: '='
},
templateUrl: '/tpl.html',
replace: true,
link: function(scope, elem, attrs, ngModel) {
scope.head = false;
scope.tdArry = [];
if (scope.dropHeader == true) scope.head = true;
if (Array.isArray(scope.list)) {
var p = scope.list.map(function(_item) {
var keys = Object.keys(_item);
if (keys.length > 0) {
if (scope.tdArry.length == 0) scope.tdArry = keys;
else {
var j = keys.map(function(_k) {
if (scope.tdArry.indexOf(_k) == -1)
scope.tdArry.push(_k);
});
}
return;
} else return;
})
} else {
console.log('Directive Expecting an array of values ')
}
scope.$watch('ngModel', function() {
scope.selected = ngModel.$modelValue;
});
scope.update = function(thing) {
ngModel.$setViewValue(thing);
ngModel.$render();
};
scope.getUpdatedVal = function() {
var selectedKey = scope.selectedKey;
if (selectedKey) {
if (scope.ngModel[selectedKey]) return scope.ngModel[selectedKey];
else {
var k = Object.keys(scope.ngModel);
return scope.ngModel[k[0]];
}
} else {
var k = Object.keys(scope.ngModel);
return scope.ngModel[k[0]]
}
}
},
}
})
})()
.title {
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.title span {
width: 100%;
display: block;
position: relative;
}
.title span:after {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-bottom: none;
border-top-color: #201e1d;
content: '';
vertical-align: middle;
display: inline-block;
position: absolute;
right: 2px;
top: 8px
}
.drop-table {
width: 100%;
border-width: 0;
border-collapse: collapse;
border-spacing: 0;
}
.drop-table th {
background: #eaeef2;
}
.drop-table th,
.drop-table td {
text-align: left;
padding: 5px 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
<!-- <div> -->
<div dropdown="colors" drop-header='true' selected-key="'name'" ng-model="myColor"></div>
</div>
<script type="text/ng-template" id="/tpl.html">
<div ng-click="open=!open">
<div class="title">
<span>{{getUpdatedVal()}}</span>
</div>
<table class="drop-table" ng-hide="!open">
<tr ng-if="head">
<th ng-repeat="h in tdArry">{{h}}</th>
</tr>
<tr ng-repeat="li in list" ng-click="update(li)">
<td ng-repeat="d in tdArry">{{li[d]}}</td>
</tr>
</table>
</div>
</script>
</div>
相关文章:
- 任何人都知道如何在asp.net telerik asp.net AJAX UI中创建自下而上的组合框
- 组合Bookmarklets以在HTTP和HTTPS之间创建切换
- 如何调用一个函数,其名称是通过在node.js中组合一些变量来动态创建的
- 使用php创建动态组合框,并更改另一个动态组合框的值
- 将json值组合在一起并创建csv
- 如何创建一个侦听按键组合的事件侦听器(ctrl 和左/右箭头)
- 如何为 Jasmine/Angular 创建一个帮助程序来组合多个 beforeEach
- 创建一个新的数组,通过在jQuery中使用条件迭代来组合两个现有对象
- 创建的动态组合框不起作用
- 在组合框选择时动态创建框架(和按钮单击)
- 我们是否可以使用谷歌闭包创建一个带有复选框和组合框的对话框
- 如何使用引导组合框创建自定义选项
- 如何创建多级可排序的投资组合
- 如何使用Highcharts创建组合图
- 如何在D3js中创建一个分组键,该键是两个JSON属性的组合
- 如何创建正则表达式javascript函数来匹配特定的字符串组合
- 如何组合多个数组中的值以创建新的组合数组
- 使用c3js为相同的json数据创建组合图(线条和条形图)
- 如何在angular js中创建多列组合框
- 为标签和属性组合创建一个自定义angular指令