Я работаю над приложением angularjs. Я показываю угловую сетку пользовательского интерфейса на основе введенных пользователем значений. Я хочу отобразить сообщение Нет записей, записанных в, когда в угловой сетке UI нет значений. Пожалуйста, найдите демо-версию herejavascript для отображения сообщения, когда Нет данных для отображения
Пример, когда пользователь дает Атланте в текстовом поле и в Чикаго в текстовое поле и нажимает на SearchLocations, он отображает сетку пользовательского интерфейса. BUt, когда пользователь вводит какую-то вещь вместо того, чтобы показывать пустое, я хочу отобразить сообщение НЕТ записей. Проблема в том, что я пытаюсь добавить столбец с переключателем, чтобы пользователь мог выбрать этот переключатель, когда захочет выбрать строку. Я не смог добиться успеха, показывая переключатель в каждой строке сетки, добавив к нему новый столбец. Любые предложения были бы очень полезными. Быть новичком, которому предстоит решить многие проблемы. Благодарю.
код расслоение плотной:
angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
angular.module('myApp').controller('citiesCtrl',function($scope){
// $scope. places = undefined;
$scope.items = ["Atlanta", "Chicago", "NewYork"];
$scope.selectAction = function() {
console.log($scope.places1);
};
});
/*Controller for searchLocations button*/
angular.module('myApp').controller('searchController', ['$scope', function($scope) {
$scope.places = ['', ''];
$scope.searchValue = '';
$scope.submit = function() {
if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
$scope.searchValue = $scope.places[0] + $scope.places[1];
}
};
$scope.users = [
{'name' : 'AtlantaChicago',
'show' : true,
'details' : [
{"Travel Date": "10/10/2014", commute:"Bus"},
{"Travel Date": "10/11/2014", commute:"flight"}]
},
{'name' : 'NewYorkChicago',
'show' : true,
'details': [
{"Travel Date": "3/15/2016", commute:"flight"},
{"Travel Date": "10/12/2016", commute:"flight"},
]
}
];
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ name: 'Travel Date', width: '5%'},
{ name: 'Departurecommute', enableFiltering: false, width: '12%' }
],
rowHeight: 20,
enableHorizontalScrollbar:2
};
}]);
HTML код:
<div class="row">
<div class="form-group" ng-controller="citiesCtrl">
<label>From</label>
<input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
</div>
<div class="form-group" ng-controller="citiesCtrl">
<label>To</label>
<input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
</div>
</div>
<input type="button" value="SearchLocations" ng-click="submit()">
<div ng-repeat="user in users | filter: {name: searchValue} : true ">
<h3>First Grid</h3>
<div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>
Я попытался добавить переключатель для каждой строки, но не удалось получить отображаться на дисплее. Я попытался добавить код ниже в новый столбец, чтобы он отображал переключатель в каждой строке, чтобы пользователь мог выбрать любую из строк.
{
name: 'ReleaseAction', width: '350',
cellTemplate: '<div class="btn-group" ng-init="releaseAction=0"><input ng-model="releaseAction" type="radio" value="0" style="width:20px"> Add</div>'
},
Любые siggestions для отображения сообщения, когда нет сетки для отображения и показать радиокнопку в каждой строке в сетке UI будет полезно.
пожалуйста, вы можете изменить в моей демонстрационной HTTP: // plnkr .co/edit/CZPRn60ufiXcCbc54iye? p = preview. Как когда я попробовал тот, который вы предложили, чтобы он не появлялся. Ценю вашу помощь. – user3684675
См. Мой обновленный ответ :) –
Спасибо, сработало. Мой другой сценарий, который я задал в своем сообщении, - показать радиокнопки в каждой строке сетки пользовательского интерфейса, я попытался, как показано в вышеприведенном сообщении, но он не появился. Я принял ответ, но вы можете помочь мне показать переключатель в каждой строке сетки, чтобы пользователь мог выбрать любую строку. – user3684675