In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Related
I have green and blue div, and I want to divide it in to two. I already tried to use but it isn't working. Can someone help me?
This is my code:
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<div class="row">
<div class="col-lg-6" style="background: #008080;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit">
<h2>Please Sign In</h2>
<div class="form-group">
<input type="text" name="username" id="email" class="form-control input-lg" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
<div class="col-lg-6" style="background: #009926">
<p>Hello World!</p>
</div>
</div>
</div>
</div>
And this is my output so far:
https://prnt.sc/h52st4
Thank you very much!
You need to add classes for different resolutions of screen. Add these classes with your col-lg-6 class. For Example
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #009926">
<p>Hello World!</p>
</div>
Your whole code will look like this
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #008080;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit">
<h2>Please Sign In</h2>
<div class="form-group">
<input type="text" name="username" id="email" class="form-control input-lg" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #009926">
<p>Hello World!</p>
</div>
</div>
Also include bootstrap css to see the result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
I am trying to use parsley.js to validate the user input in client validation but no matter what I tried it doesn't work and have already taken these steps below.
Have downloaded parsley.js from http://parsleyjs.org/dist/parsley.min.js
Then add the path to the script like this: (This is added to the master.blade.php which all other pages extend).
After which I add data-parsley-validate to the form that I want to be validated. And this is the form and how I did it.
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">AJAX Register</div>
<div class="panel-body">
<form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
{!! csrf_field() !!}
<div class="form-group">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" id="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" id="email" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password" id="password" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
<i class="fa fa-btn fa-user"></i> Register
</button>
<a href="{!! asset('login/facebook') !!}">
<div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
If you are using jQuery wrap your parsley code in:
$(document).ready(function(){
// your code here
})
Also post your script code with parsley.
I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>
I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
I am trying to Manipulate DOM css style using angular , suppose text box value i want to set as height . i assigned ng-model to text box and then ng-style="{height:heightdef}"
How can i acieve this using Directive??
Fiddle ::
http://jsfiddle.net/simmi_simmi987/U5KCg/
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="row">
<h1>Hello, world! {{hello}}</h1>
<input type="text" />
<div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>
<div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
<br/>
I am main Box
<a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
<a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
<a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
<!-- <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
<div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->
</div>
</div><!-- row closed -->
<br/><br/><br/><br/>
<div class="row">
<div class="form col-md-5 category">
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Height</label>
<div class="col-md-9">
<input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- Width input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Width</label>
<div class="col-md-9">
<input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<!-- BAckground-color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">BgColor</label>
<div class="col-md-9">
<input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<br/>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<div class="form col-md-5 col-md-offset-1 category">
<div class="form-group indiv-box">
<h3>Box 1:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link1" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box1label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 2:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link2" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box2label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 3:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link3" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box3label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
<br/><br/><br/>
<div class="form-group indiv-box">
<h3>Box 4:</h3>
<label class="col-md-3 control-label" for="name">URL</label>
<div class="col-md-9">
<input ng-model="link4" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<label class="col-md-3 control-label" for="name">Lablel</label>
<div class="col-md-9">
<input ng-model="box4label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
<button class="btn btn-primary btn-default pull-right" > Set </button>
</div>
</div>
</div><!-- row closed -->
<div> <!-- Container closed -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/ng-grid-2.0.7.min.js"></script>
</div>
Javascript ::
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
$scope.hello="My dear very good morning";
$scope.heightdef=100;
$scope.widthdef=1000;
$scope.box1label="box1";
$scope.box2label="box2";
$scope.box3label="box3";
$scope.box4label="box4";
$scope.link1="box1.html";
$scope.link2="box2.html";
$scope.link3="box3.html";
$scope.link4="box4.html";
});
If I understand your question correctly, this link may be help you to get your answer. This is the link which I was looking for like you.
for short answer:
<div ng-style="{ 'height' : heightdef }"></div>
So here is the updated answer:
You should create derective according angular Directive Documentation
app.directive('myBox', function(){
function link(scope, el, attrs) {
}
return {
scope:{
options: '='
},
restrict: 'E',
link: link,
// here you can use inline template: "<div>..." or templateUrl: 'url to your partial'
};
});
so you can use it like this <my-box options='options'></my-box>
to change options by clicking button:
$scope.setMainBox = function(){
var options = {
heightdef: $scope.heightdef,
widthdef: $scope.widthdef,
bgcolordef: $scope.bgcolordef
};
$scope.options = options;
};
markup
<button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>
here is quick example