I loop an array inside another array in angular.
fields:
[
{
label: 'First Name',
name: 'firstname',
key: '',
type: 'text',
//fixa requierd i templatesen
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: '',
required: true,
},
{
label: 'Email',
name: 'email',
key: '',
required: true,
type: 'email',
},
{
key: 'test',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
Whilst looping through field.labels, I want to access it's sibling "key". I tried using $parent scope, but that will include the entire scope. Then angular doesn't know what key it should use.
<div ng-repeat="field in fields">
<div ng-repeat="subfield in field.labels">
<!-- gets you parent's key -->
{{field['key']}}
<!-- you can play around with $index to reach the parent's siblings -->
<!-- just make sure index is in the range though -->
{{fields[$parent.$index - 1]['key']}}
{{fields[$parent.$index + 1]['key']}}
</div>
</div>
Related
Here's the screenshot of my ui-grid.
Here's the code that creates that filter.
{ field: 'channel_type', displayName: "Type", filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'HD', label: 'HD' },
{ value: 'SD', label: 'SD' }
]
}},
{ field: 'price', displayName: "Price", enableFiltering: false, enableSorting: false},
My data is loaded in uigrid from rest api call.
I really can't figure it out from where is it adding that blank option. I haven't found any solution to this issue. Please help me in solving this problem.
Its a known issue, see ui-grid issues
The solution (workaround) is to add some custom style:
#grid1 div div select option:first-child[value=""] {
display: none;
}
Demo Plunker
You have to use filterHeaderTemplate and create your dropdown in it. Here is the example:
field: 'yourField',
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><select class="grid-filter-control" ng-model="colFilter.term" ng-options="option.value as option.label for option in colFilter.selectOptions"></select></div>',
filter: {
disableCancelFilterButton: true,
term: '',
type: uiGridConstants.filter.SELECT,
selectOptions: [{ value: '', label: 'All' },
{ value: '1', label: 'Something' },
{ value: '2', label: 'Something Else' }]
}
Defining term will select your first option and the empty one is not going to show.
How can I wrap some field in div and don't use fieldGroup.I want to all div have class 'left-layout' will wrapped by class 'left-container'
Controller:
vm.fields = [
{
key: 'first',
type: 'input',
className: 'left-layout',
model: vm.model.name,
templateOptions: {
label: 'First Name'
}
},
{
key: 'last',
type: 'input',
model: vm.model.name,
className: 'left-layout',
templateOptions: {
label: 'Last Name'
}
},
{
key: 'email',
type: 'input',
templateOptions: {
label: 'Email Address',
type: 'email'
}
}
];
index.html
<script>
$('.left-layout').wrapAll("<div class='left-container'></div>");
</script>
This is jsbin link: http://jsbin.com/honuxi/edit?html,js,output
Why wouldn't you want to use fieldGroup? That's how you do that. You add the className to the fieldGroup and then wrap the fieldGroup with a wrapper you have pre-defined in the formly config:
.config(function config(formlyConfigProvider) {
formlyConfigProvider.setWrapper({
name: 'left-container',
template: '<div class="left-container">
<formly-transclude></formly-transclude>
</div>'
});
}
vm.fields = [
{
wrapper: 'left-container',
className: 'left-layout',
fieldGroup: [
{
key: 'first',
type: 'input',
model: vm.model.name,
templateOptions: {
label: 'First Name'
}
},
{
key: 'last',
type: 'input',
model: vm.model.name,
templateOptions: {
label: 'Last Name'
}
},
{
key: 'email',
type: 'input',
templateOptions: {
label: 'Email Address',
type: 'email'
}
}
}]
];
I'm using Angular Formly and works very well if the model is a value of the scope, like a string:
{
key: 'name',
type: 'input'
}
The problem is that I'm using a more elaborated object to handle the model, with "controller as" syntax and the name as part of the user object:
vm.user = {name: 'john', lastname: 'doe'}
And then of course, the key would be:
{
key: 'user.name',
type: 'input'
}
(Usually the vm is taken out of the key in formly notation).
The problem is that Formly uses a bracketed notation to handle the model:
template = '<input ng-model=\"model[options.key]\">'
That when processed, spits out this output:
<input name="bd.form_input_user.name_1" type="text" ng-model="model.user.name">
Of course, the model doesn't have the user object and empty fields show.
So, my question is: How can I pass or link the appropriate object to the formly model when it's a more complex object?
Thanks in advance.
The model can be defined both at the form and the field level, so it is easy to use any property in an object graph as a form field. An example:
Markup:
<div ng-controller="MyCtrl as vm">
<formly-form model="vm.data" fields="vm.userFields">
<button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</formly-form>
</div>
JavaScript:
angular
.module('myApp', ['formly', 'formlyBootstrap'])
.controller('MyCtrl', ['$scope', function($scope) {
var vm = this;
vm.data = {
user: {
name: 'john',
lastname: 'doe'
},
extra: 'extra'
};
vm.userFields = [
{
model: vm.data.user,
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
placeholder: 'Enter name'
}
},
{
model: vm.data.user,
key: 'lastname',
type: 'input',
templateOptions: {
type: 'text',
label: 'Lastname',
placeholder: 'Enter lastname'
}
},
{
key: 'extra',
type: 'input',
templateOptions: {
type: 'text',
label: 'Extra',
placeholder: 'Enter extra'
}}
];
}]);
A fiddle: http://jsfiddle.net/masa671/c37gxg3h/
I don't know how to give e-ng-options of xeditable in angular Formly.
Here is the formly Config:
formlyConfig.setType({
extends: 'select',
template: '<div><span editable-select="model[options.key]" e-ng-options="" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableSelect'
});
Here is the select value:
{
className: 'col-xs-12 col-sm-6',
type: 'editableSelect',
key: 'gender',
templateOptions: {
label: 'Gender',
options: [
{name: 'Male', value: 'male'},
{name: 'Female', value: 'female'}]
}
}
Pls look at JSBIN
I just figured it out.
formlyConfig.setType({
extends: 'select',
template: '<div><span editable-select="model[options.key]" e-ng-options="s.value as s.name for s in {{options.templateOptions.options}}" e-name="{{::id}}" e-placeholder="{{options.templateOptions.placeholder}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableSelect'
});
Refered xeditable
I am using Smart-table to show reports to the user with Angular js.
Now,I want to customize table header and want a colspan in smart table 's header.
Does anyone know about this?Is it possible?
Please share example,plunker if anyone have achieved this
You can have whatever template you want in cellTemplate attr, where I have concatenated both first name and last name.
Like I have used,
scope.columnCollection = [
{ label: 'Name', map: 'FirstName', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.FirstName.$error.required">Required!</span>',cellTemplate:'<div class="name"><span>{{dataRow.FirstName +" "+dataRow.LastName}}</span><div>'}, //have whatever template you want and your custom css
//{ label: 'Last Name', map: 'LastName' },
{ label: 'User Name', map: 'UserName', validationAttrs: 'required' },
{ label: 'Password', map: 'Password', noList: true, editType: 'password' },
{ label: 'Customer', map: 'CustId', optionsUrl: '/GetCusts', editType: 'radio' },
{ label: 'Role', map: 'RoleId', optionsUrl: '/GetRoles', editType: 'select', defaultTemplate: '<option value="" ng-hide="dataRow[column.map]">---</option>', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.RoleId.$error.required">Required!</span>' }, // NOTE: small hack which enables defaultTemplate option :)
{ label: 'E-mail', editType: 'email', map: 'Email' },
{ label: 'Cell Phone', map: 'Mobilephone', noEdit: true, validationAttrs: 'required' },
{ label: 'Locked', map: 'IsLocked', cellTemplate: '<input disabled type="checkbox" name="{{column.map}}" ng-model="dataRow[column.map]">', editType: 'checkbox', noAdd: true }
];
In css you can have your custom Css.
Please have a look at this
plunker
Hope this solves your problem :)
Based on the documentation you need to add something like this:
app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever#gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou#gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef#gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'same same but different', map: 'firstName'},
{label: 'Last Name', map: 'lastName'}
];
}]);
Your columnCollection will adjust the labels based on the mappings.