How can I make twig loop, that goes like this? Tried batch and loop.index, but just couldn't make it work as expected.
<div class="col-lg-6">
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="col-lg-6">
</div>
Related
I am trying to loop through a nested object and use a checkbox to toggle the attribute. I am using nested ng-repeat statements. The data displays fine but when I go to save the data, it turns out its not actually modifying the ng-model like it normally would. Is there something that I am missing here?
Here is the HTML:
<div class="settings-container">
<div ng-repeat="(key, category) in vm.graphSettings">
<div class="row">
<div class="col-xs-12">
<h3>{{ key | titleCase }}</h3>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 col-xs-12">
<div class="row select-row">
<div class="col-xs-3" ng-repeat="(id, value) in category">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="value">
<div class="pseudo-checkbox"></div>
<span class="input-name">{{ id | titleCase }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the object the above vm.graphSettings is reflecting.
graph: {
general: {
showLegend: false,
showNullValues: false,
showTitle: false,
},
xAxis: {
showLabel: false,
showXAxis: true,
dynamicLines: true
},
yAxis: {
showLabel: false,
showYAxis: false
}
}
The ng-model should be the name of a model property, not the value itself:
<div class="settings-container">
<div ng-repeat="(key, category) in vm.graphSettings">
<div class="row">
<div class="col-xs-12">
<h3>{{ key | titleCase }}</h3>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 col-xs-12">
<div class="row select-row">
<div class="col-xs-3" ng-repeat="(id, value) in category">
<div class="checkbox">
<label>
̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶a̶l̶u̶e̶"̶>̶
<input type="checkbox" ng-model="category[id]">
<div class="pseudo-checkbox"></div>
<span class="input-name">{{ id | titleCase }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am listing div using ng-repeat to in following manner and include form-template which is assigned. I have several form-template and want to include in following manner. They can have nested ng-repeat to include same template. So i am using "trackerWidgetData" variable in my template. its working fine but inner ng-repeat have different variable(dependWidgetData).
How to use common model value for form-template. If we are including it in nested ng-repeat.
<div class="listview-trckr-new clearfix" ng-repeat="trackerWidgetData in optionsList.inlineTemplates | filter:options.trackerSearchClient track by $index">
<div class="listview-trckr-new-top">
<div class="listview-trckr-new-left clearfix">
<h3>{{trackerWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="trackerWidgetData.template" ng-include src="'/public/views/tracker-templates/'+trackerWidgetData.template"></div>
</div>
</div>
<div class="listview-trckr-new-btm" ng-if="trackerWidgetData.dependendTrackers && trackerWidgetData.dependendTrackers.length">
<div class="listview-trckr-new-top" ng-repeat="dependWidgetData in trackerWidgetData.dependendTrackers">
<div class="listview-trckr-new-left clearfix">
<h3>{{dependWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="dependWidgetData.template" ng-include src="'/public/views/tracker-templates/'+dependWidgetData.template"></div>
</div>
</div>
</div>
</div>
I have many different type template like this.
<script type="text/ng-template" id="addManualContent.tpl">
<ng-form name="stepAddForm" novalidate >
<div class="new-weight-tracker">
<div class="weight-auto-fil-input">
<input type="text" name="value" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].value" />
<div class="new-trkr-select">
<select class="weight-selectbox" name="foodUnit" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].unitId" ng-options="opt.id as opt.unitName for opt in trackerWidgetData.unitType.units">
</select>
</div>
</div>
<div class="new-tracker-cale">
<adm-dtp ng-model='form[trackerWidgetData.uniqueFormId].trackerValue.dateTime' maxdate="{{optionsList.maxTimeStamp}}" options='{format: toUpperString(dateFormat) + "hh:mm", default: todayTimestamp, freezeInput:false}'>
<input name="date" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.dateTime" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" type="text" ng-required="true" dtp-input>
<i aria-hidden="true" class="fa fa-calendar" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" dtp-toggle></i>
</adm-dtp>
</div>
<div class="new-logit-btn">
<a ng-href="" ng-class="{'disable-anchor-btn': optionsList.inAddProcess}" ng-click="optionsList.inAddProcess ? null : addTrackerValue(stepAddForm, trackerWidgetData)" class="fill_button">Log It</a>
</div>
</div>
</ng-form>
</script>
The Question is How to pass model value to ng-template when including it?
this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});
I thought that I understand how pushing and pulling columns work...but I guess I was wrong. I have the following jsfiddle where I created a very simple grid. It looks like this while in xs:
Insured Name
Face AMount
Gender
Product
and then when I am in sm, it looks like thus:
Insured Name | Face Amount
Gender | Product
I'm all good thus far. However, when I get to md I need the Face Amount and Gender fields to switch places. As you can see (from the fiddle) I tried to push the FaceAmount field 6 columns (I expected that this field would then be pushed down into the next row) and then pull the Gender field 6 columns (thus pulling it up a row).
However, if you pull the fiddle out to the md viewpoint...the FaceAmount column is pushed way off to the right (instead of wrapping down) and the Gender field is pulled way to the left to the point where you can't even see it anymore.
Is there something that I am missing? I would have expected that since I am pushing the FaceAmount field passed the 12 column mark that it would wrap down. Similarly, I expected the Gender field to be pulled up to the previous row.
I think you are right by saying:
I am pushing the FaceAmount field passed the 12 column mark
Also, you seem to understand to use push and pull. The problem in the jsfiddle is that you trying to rearrange between two different rows. For example, you can push Insured Name and pull Face Amount using:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="well"> 1 </div>
</div>
<div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
<div class="well"> 3 </div>
</div>
<div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
<div class="well"> 2 </div>
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-md-4">
<div class="well"> 4 </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> 5 </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> 6 </div>
</div>
</div>
</div>
Result:
But while doing between different rows it doesn't work that way. From this article:
As pushing and pulling works by setting a left or right property it will never wrap to another row as you noted.
Here is a very good article to understand how push and pull works.
This work! http://jsfiddle.net/ujrwyrbr/68/
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="row">
<div class="col-xs-6">
Insured Name:
</div>
<div class="col-xs-6">
Some Name
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-6">
Face Amount:
</div>
<div class="col-xs-6">
Some Amount
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-6">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6">
Gender:
</div>
<div class="col-xs-6">
Male
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-6">
Product:
</div>
<div class="col-xs-6">
Some Product
</div>
</div>
</div>
</div>
</div>
</div>
You can get this to work if you can use the col-md-3 viewport on md and show 4 columns across.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="row">
<div class="col-xs-6 trRight">
Insured Name:
</div>
<div class="col-xs-6 trLeft">
x
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-md-push-3">
<div class="row">
<div class="col-xs-6 trRight">
Face Amount:
</div>
<div class="col-xs-6 trLeft">
x
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-3">
<div class="row">
<div class="col-xs-6 trRight">
Gender:
</div>
<div class="col-xs-6 trLeft">
x
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="row">
<div class="col-xs-6 trRight">
Product:
</div>
<div class="col-xs-6 trLeft">
x
</div>
</div>
</div>
</div>
</div>
Remember too that nested cols should be inside another row.
http://www.codeply.com/go/AMAmnvznK6
In one of my angularjs pages, I am using ngMessages module for form validation. While loading that page I am getting folowing error in console.
"angular.js:9400TypeError: d.setClass is not a function
at render (angular-messages.js:413)"
No idea why. Any help would be appreciated.
here is the HTML
<div class="extranet-content">
<div class="container-list">
<form name="personalForm" ng-submit="personalForm.$valid && saveUsers()" novalidate>
<div class="list-header" ng-show="all_users.length > 0">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1">
<h3>
Id
</h3>
</div>
<div class="col-xs-3">
<h3>
Name
</h3>
</div>
<div class="col-xs-3">
Login
</div>
<div class="col-xs-2">
Sign
</div>
<div class="col-xs-2">
password
</div>
<div class="col-xs-12">
<div class="border"></div>
</div>
</div>
</div>
<div class="list-content" ng-class="{ 'noHeader' : !all_users.length }">
<div class="row" ng-show="saveErrors.length > 0" ng-repeat="error in saveErrors track by $index">
<div class="col-xs-12">
</div>
<div class="col-xs-12"></div>
</div>
<div class="row clearfix"
ng-repeat-start="user in all_users = (users | filter: searchUser) | orderBy : predicate:reverse track by $index"
ng-class="{ 'marginTop' : $first}">
<div class="col-xs-1">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" name="txtLogin" id="txtLogin_{{$index}}" ng-model="user.Login">
</div>
<div class="col-xs-2">
<ng-form name="signForm">
<input maxlength="7" type="text" name="txtSign" id="txtSign_{{$index}}" ng-model="user.Sign"
required>
<span ng-messages="listFormSubmitted && signForm.txtSign.$error" role="alert" class="error">
<span ng-message="required">required</span>
</span>
</ng-form>
</div>
<div class="col-xs-2"></div>
</div>
<div class="row group" ng-repeat-end>
<div class="col-xs-12" ng-if="!$last">
<div class="borderBottom"></div>
</div>
</div>
</div>
</form>
</div>
</div>