I have a backend form which one is connected with a table. It's a configuration field and inside we can find something like a json.
The form already exist (the limitHours field is working fine and you can see check how is it declared below).
So, i just added this new flag enable_rotation_system.
In my form:
->add('limitHours', 'number', array('required' => false, 'mapped'=>false , 'label' => 'Heure limite positionnement'))
->add('enable_rotation_system', 'checkbox', array('required' => false, 'mapped' => false , 'label' => 'Activer les rotations'))
In the view:
<span class="input text fullWidth">
{{ form_label(form.posConfiguration.limitHours) }}{{ form_errors(form.posConfiguration.limitHours) }}
{{ form_widget(form.posConfiguration.limitHours, {'attr': {'value': posConfigurations['configuration']['limitHours'] }} ) }}
</span>
<span class="checkboxInput">
{{ form_widget(form.posConfiguration.enable_rotation_system , {'attr': {'value': posConfigurations['configuration']['enable_rotation_system'] }} ) }}
{{ form_label(form.posConfiguration.enable_rotation_system) }}{{ form_errors(form.posConfiguration.enable_rotation_system) }}
</span>
What happens: when i send my form with my checkbox tick, then in the database field i get: "enable_rotation_system":""
But, true or may be 1 was expected here....
Now, if i send my form with my checkbox not tick, then in the database field the enable_rotation_system flag doesn't exist anymore. Only "limitHours":"18" remains.
Thanks for your help.
EDIT: I'm not sure how the data are sent, but i think angular is used.
{{ form_start(form, { 'attr': {'ng-app': 'moduleApp', 'ng-controller': 'MainCtrl as ctrl', 'novalidate': 'novalidate' } }) }}
At the bottom i got this
angular.module('moduleApp').controller('MainCtrl', ['$scope', function($scope){
var self = this;
self.posConfig = {{ posConfigurations|json_encode|raw }};
self.moduleConfig = {{ configuration|raw }};
self.submitForm = function(event, form) {
if (form.$valid) {
$("#cpn_corebundle_moduleinstance_configuration").val(JSON.stringify(self.moduleConfig));
} else {
event.preventDefault();
}
}
}]);
Related
I have a simple Web UI build in angularJS 1.4.4. I am stuck in a basic problem of the click event in UI grid. On click of eye button and file button in the grid, successnotification() function defined in the controller is not called. Whereas for refresh button, button click is working fine. Below is my code of HTML and Controller
class AccesspointListController {
/*#ngInject*/
/* Read me documentation for Grid : http://www.ag-grid.com/documentation.php */
constructor($rootScope, GridFilters,AccesspointListService, SnapshotController) {
this.name = 'accesspointlist';
Object.assign(this, {$rootScope, GridFilters,AccesspointListService, SnapshotController});
this.columnDefs = [
{
headerName: "Sr No.",
//field: "accessPointDetailsId",
field: "no",
width:15,
filter: 'number',
filterParams: { apply: true },
cellStyle:{'text-align': 'center'},
unSortIcon:true
},
{
headerName: "IP",
//field: "accessPointIP",
field: "ip",
filter:'text',
width:80,
unSortIcon:true
},
{
headerName: "Actions",
field: "",
width:35,
suppressSorting: true,
suppressMenu:true,
cellRenderer: function(params) {
return '<button class="btn primary" ng-click="grid.appScope.successnotification(row)"><i class="fa fa-eye"></i></button>'+
'<button class="btn primary" ng-click="grid.appScope.vm.successnotification(row)"><i class="fa fa-file-image-o"></i></button>';
}
}
];
this.allOfTheData = require("json!./favCFIC.json")['items'];
this.pageSize = '10';
this.gridOptions = {
columnDefs: this.columnDefs,
//rowData: $scope.allOfTheData,//Load data here for static non paging data.
groupHeaders: false,
enableColResize: false,
enableSorting: true,
suppressRowClickSelection: true,
headerHeight:40,
rowHeight:40,
angularCompileHeaders: true,
angularCompileFilters: true,
enableFilter: true,
icons: {
// use font awesome for menu icons
sortAscending: '<i class="fa fa-sort-amount-asc"/>',
sortDescending: '<i class="fa fa-sort-amount-desc"/>'
}
};
}//end constructor
loadData() {
let allOfTheData = this.allOfTheData;
if(allOfTheData.length==0) {
$rootScope.alerts.push({
type: 'danger',
msg: 'There is an issue building the data table.',
targetState: 'forms'
});
} else {
let dataSource = {
rowCount: (this.allOfTheData.length),
pageSize: parseInt(this.pageSize), // changing to number, as scope keeps it as a string
getRows: function (params) {
// this code should contact the server for rows. however for the purposes of the demo,
// the data is generated locally, a timer is used to give the experience of
// an asynchronous call
setTimeout(function() {
// take a chunk of the array, matching the start and finish times
let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
// see if we have come to the last page. if we have, set lastRow to
// the very last row of the last page. if you are getting data from
// a server, lastRow could be returned separately if the lastRow
// is not in the current page.
let lastRow = -1;
if (allOfTheData.length <= params.endRow) {
lastRow = allOfTheData.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 500);
}
};
this.gridOptions.api.setDatasource(dataSource);
this.gridOptions.api.sizeColumnsToFit()
}
successnotification(){
this.notf1.show('Success! You\'ve clicked the Add button.', "success");
};
}
export default AccesspointListController;
This is my html file.
<section class="container">
<div class="col-md-10 cf">
<div ncy-breadcrumb></div>
<br />
<div id="notificationSpot">
</div>
<br />
<br class="cf"/>
<div class="col-sm-8">
<div class="panel panel-default" id="content-formatting">
<div class="panel-heading" align="right">
<label id="lastUpdated">Last Updated : </label>
<label id="lastUpdatedValue">19/2/2018 12:20 AM </label>
<button type="button" class="btn 0" ng-click="vm.redirect()"><i class="fa fa-refresh"></i></button>
</div>
<div ag-grid="vm.gridOptions" class="ag-fresh" style="clear:both; height: 430px; width:100%;" ng-init="vm.loadData()"></div>
</div>
</div>
<span kendo-notification="vm.notf1" k-position="{ top: 110}" ></span>
<span kendo-notification="vm.notf2" k-append-to="'#notificationSpot'" k-auto-hide-after="0"></span>
</div>
</section>
Solution: Modify cell renderer code as per below code snippet
cellRenderer: function(params) {
return $compile('<i class="fa fa-eye"></i>')($scope)[0];
}
You can define and register the callback (onSelectionChanged) in ag-grid:
var gridOptions = {
columnDefs: columnDefs,
suppressRowClickSelection: false, // Important! allow to select the rows
rowSelection: 'single', // option, if you need only one row selected
onSelectionChanged: onSelectionChanged // callback
};
This callback will fire each time the selection of the ag-grid is changed. You can define the callback:
function onSelectionChanged() {
var selectedRows = gridOptions.api.getSelectedRows();
var selectedRowsString = '';
selectedRows.forEach( function(selectedRow, index) {
if (index!==0) {
selectedRowsString += ', ';
}
selectedRowsString += selectedRow.athlete;
});
document.querySelector('#selectedRows').innerHTML = selectedRowsString;
}
The information is taken from official documentation:
Link to documentation
I'd like to display only a the first three chips of a list, and put a marker that there are more to see (like three dots for example).
Is there a way to do so with the <md-chips> directive ?
I'd prefer specify that I'm talking about a read-only chips list, not editable. I've tried with md-max-chips but it only controls the add of new chips.
Some piece of code :
<div layout="row" layout-align="start center">
<md-chips ng-model="mylist" readonly="true"></md-chips>
</div>
How I would like it to be displayed (the header is not in the code)
Try this solution:
HTML:
<md-chips ng-model="ctrl.visible" readonly='true' ng-click="ctrl.select($event)">
</md-chips>
Javascript:
self.fruitNames = ['Apple', 'Banana', 'Orange', 'Test1', 'Test2', 'Test3', 'Test4'];
var i = 0;
function ModifyVisible(){
self.visible = self.fruitNames.slice(0, (3 * ++i));
if(self.fruitNames.length > self.visible.length)
self.visible.push('...');
}
ModifyVisible();
self.select = function($event) {
if($event.path[0].textContent == '...')
ModifyVisible();
}
You may going to try to manipulate your list object like in this codepen demo. The last item is an placeholder item. You should manipulate your list before rendering / binding to view.
self.vegObjs = [
{
'name' : 'Broccoli',
'type' : 'Brassica'
},
{
'name' : 'Cabbage',
'type' : 'Brassica'
},
{
'name' : 'Carrot',
'type' : 'Umbelliferous'
},
{
'name' : '...',
'type' : ''
}
];
I have created a toggle view to select available items in Ionic, and if anyone of the item were selected, I want to uncheck all the other items. I also have a scan function which allows me to dynamically update the items list
I'm fairly new to ionic, so I just have the following code in my settings.html
<ion-toggle ng-repeat="item in itemsList"
ng-model="item.checked">
{{ item.text }}
</ion-toggle>
and then I have created a simple settings.js:
(function () {
'use strict';
angular.module('i18n.setting').controller('Settings', Settings);
SettingController.$inject = ['$scope'];
function Settings($scope){
$scope.settingsList = [
{text: "item1", checked: true},
{text: "item2", checked: false}
];
}
})();
I know ng-model="item.checked" will do the job of changing the attribute $scope.settingsList.checked for me. But what I want to know this how to use it to check one items and uncheck all the other ones?
loop through all the items, set the checked state of all the values to false and then your html code must be:
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked"
ng-checked="item.checked" style="border:1px solid #28a54c" ng-change="toggleChange(item)">
{{ item.text }}
</ion-toggle>
Your Controller code
$scope.toggleChange = function(item) {
if (item.checked == true) {
for(var index = 0; index < $scope.settingsList.length; ++index)
$scope.settingsList[index].checked = false;
item.checked = true;
} else {
item.checked = false
}
};
And it's better to use forEach in async environment.
Angular 2+ Version, Ionic 4
HTML
<div class="toogle" *ngFor="let item of toogleConfig">
<div class="toogle__title">{{item.title}}</div>
<ion-toggle [(ngModel)]="item.checked" (ngModelChange)="ToogleChange(item.id)" color="success"></ion-toggle>
</div>
</div>
TS
public toogleConfig = [
{id:0, title:'Recurrent', checked: false},
{id:1, title:'One time', checked: false},
]
public ToogleChange(index:number) {
this.toogleConfig.forEach(toogle => { toogle.checked = false; });
this.toogleConfig[index].checked = true;
}
var phoneIdentification = {
'phoneFiled': {
'label': 'Enter Phone',
'regex': '[0-9]{11,12}'
}
};
var mailIdentification = {
'mailField': {
'label': 'Enter Email',
'regex': '^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$'
},
'passwordField': {
'label': 'Enter Password'
}
};
I have for example this two data. Default I render first one:
$scope.data.dataSource = phoneIdentification;
And Than in view:
<div ng-repeat="(key, item) in dataSource">
<label>{{item.label}}</label>
<input type="text" ng-if="item.regex" ng-pattern="{{item.regex}}"/>
</div>
And I have button also, on click I changed dataSource, I'm setting new value from controller:
$scope.data.dataSource = mailIdentification;
View is updating but, problem is validations, It doesn't update input's Reg-exes>
How it is possible to re-render whole view?
You are missing the regex property in the passwordField field in the mailIdentification object. You need it because you are accessing it in the ng-repeat directive.
Your mailIdentification object should look like this:
var mailIdentification = {
...
'passwordField': {
'label': 'Enter Password',
'regex': `some regex here`
}
};
I would like to use a check list and show the user the boxes she has checked.
I am using this framework: http://vitalets.github.io/angular-xeditable/#checklist . See his example 'Checklist' versus his example 'Select multiple'. However, I do not want to display a link with a comma separated string, i.e., join(', '). I would like each selection to appear beneath the previous, in an ordered list or similar.
Pretty much copied from his examples, here are the guts of my controller:
$scope.userFeeds = {
feeds: {}
};
$scope.feedSource = [
{ id: 1, value: 'All MD' },
{ id: 2, value: 'All DE' },
{ id: 3, value: 'All DC' }
];
$scope.updateFeed = function (feedSource, option) {
$scope.userFeeds.feeds = [];
angular.forEach(option, function (v) {
var feedObj = $filter('filter')($scope.feedSource, { id: v });
$scope.userFeeds.feeds.push(feedObj[0]);
});
return $scope.userFeeds.feeds.length ? '' : 'Not set';
};
And here is my html:
<div ng-show="eventsForm.$visible"><h4>Select one or more feeds</h4>
<span editable-select="feedSource"
e-multiple
e-ng-options="feed.id as feed.value for feed in feedSource"
onbeforesave="updateFeed(feedSource, $data)">
</span>
</div>
<div ng-show="!eventsForm.$visible"><h4>Selected Source Feed(s)</h4>
<ul>
<li ng-repeat="feed in userFeeds.feeds">
{{ feed.value || 'empty' }}
</li>
<div ng-hide="userFeeds.feeds.length">No items found</div>
</ul>
</div>
My problem is - display works with editable-select and e-multiple, but not with editable-checklist. Swap it out and nothing is returned.
To workaround, I have tried dynamic html as in here With ng-bind-html-unsafe removed, how do I inject HTML? but I have considerable difficulties getting the page to react to a changed scope.
My goal is to allow a user to select from a checklist and then to display the checked items.
Try this fiddle: http://jsfiddle.net/mr0rotnv/15/
Your onbeforesave will need to return false, instead of empty string, to stop conflict with the model update from xEditable. (Example has onbeforesave and model binding working on the same variable)
return $scope.userFeeds.feeds.length ? false : 'Not set';
If you require to start in edit mode add the attribute shown="true" to the surrounding form element.
Code for completeness:
Controller:
$scope.userFeeds = {
feeds: []
};
$scope.feedSource = [
{ id: 1, value: 'All MD' },
{ id: 2, value: 'All DE' },
{ id: 3, value: 'All DC' }
];
$scope.updateFeed = function (feedSource, option) {
$scope.userFeeds.feeds = [];
angular.forEach(option, function (v) {
var feedObj = $filter('filter')($scope.feedSource, { id: v });
if (feedObj.length) { // stop nulls being added.
$scope.userFeeds.feeds.push(feedObj[0]);
}
});
return $scope.userFeeds.feeds.length ? false : 'Not set';
};
Html:
<div ng-show="editableForm.$visible">
<h4>Select one or more feeds</h4>
<span editable-checklist="feedSource"
e-ng-options="feed.id as feed.value for feed in feedSource"
onbeforesave="updateFeed(feedSource, $data)">
</span>
</div>
<div ng-show="!editableForm.$visible">
<h4>Selected Source Feed(s)</h4>
<ul>
<li ng-repeat="feed in userFeeds.feeds">{{ feed.value || 'empty' }}</li>
<div ng-hide="userFeeds.feeds.length">No items found</div>
</ul>
</div>
Css:
(Used to give the "edit view" a list appearance)
.editable-input label {display:block;}
Also there is the option of using a filter if you do not need to do any validation or start in edit mode.
Controller:
$scope.user = { status: [2, 3] };
$scope.statuses = [
{ value: 1, text: 'status1' },
{ value: 2, text: 'status2' },
{ value: 3, text: 'status3' }
];
$scope.filterStatus = function (obj) {
return $scope.user.status.indexOf(obj.value) > -1;
};
HTML:
<a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">
<ol>
<li ng-repeat="s in statuses | filter: filterStatus">{{ s.text }}</li>
</ol>
</a>