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
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>
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>
I have two input forms, Date To and Date From that I want to repeat using ng-repeat. Right now, it's a block oh HTML text and I'm not sure what's the most efficient way of doing this except concatinating all the div elements the js side with the plus symbol.
ex. '<div class="container"> + bla bla + ...'
<div class="modal-body">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
</div>
The goal of my application is that a user chooses how many bookings he will store in his array in the first modal. Then he clicks a button, and the above html text will appear in the second modal. Based on the number of bookings the user chooses (let's say 3), the html above will repeat 3 times in a modal (there will be 3 Date From/Date To forms in a vertical list).
Any suggestions would be appreciated!
It is simple to use ng-repeat just go through the documentation here.
I see that in your question you are appending divs like:
htmlString ='<div id="1">Bla</div>'+'<div id="2">Bla</div>';
ngRepeat directive will be used on the HTML itself. Like this:
arrayOfItems = [1,2,3]; //in your controller
<!-- in your html -->
<div ng-repeat="item in arrayOfItems" id="{{item}}">
Bla
</div>
First Modals HTML
Number of bookings:
<input type="text" ng-model="numberOfBooking" name="numberOfBooking" />
<button type="button" ng-click="confirmNumberOfBooking()">Confirm Booking</button>
First Modal Controller
$scope.numberOfBooking = 1;
$scope.newResource.bookings = [
{
fromDateAndTime: "datetime",
toDateAndTime: "datetime"
}
];
$scope.confirmNumberOfBooking = confirmNumberOfBooking;
function confirmNumberOfBooking(){
for(var i = 0; i < $scope.numberOfBooking; i++){
$scope.newResource.bookings.push({fromDateAndTime: "datetime",toDateAndTime: "datetime"});
}
}
Second Modal HTML
<div ng-repeat="booking in newResource.bookings track by $index">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng model="newResource.booking[$index].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[$index].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
I am new with Angularjs. I want to take user input in my array of the controller
This is the html
<div class="col-md-6">
<div class="row text-center">
<div class="col-xs-6">
<h4> data A:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="a"></h4>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<h4>data B:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="b"></h4>
</div>
</div>
<div class="row btn-primary text-center" ng-click="showData()">
<i class="glyphicon glyphicon-folder-open" aria-hidden="true">
<h4>data</h4>
</i>
</div>
and the controller
$scope.infoSet =[
{
"key" : "data A",
"value" : $scope.a
},
{
"key" : "data B",
"value" : $scope.b
}];
$scope.showData = function () {
console.log($scope.infoSet);
console.log($scope.a);
console.log($scope.b);
}
How can i do that ? i have tried Difficulty with ng-model, ng-repeat, and inputs .
But i cant put the input in proper format with this. please help . thanks in advance
Remove $scope.a and $scope.b, and use
ng-model="infoSet[0].value"
and
ng-model="infoSet[1].value"
Or use ng-repeat
<div class="row text-center" ng-repeat="info in infoSet">
<div class="col-xs-6">
<h4>{{info.key}}</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="info.value"></h4>
</div>
</div>
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>