I have an array in my data object and it will push as many time user wants to add data to it, and it is rendering with v-for perfectly.
The problem is related UI part didn't update, see the following picture :
this is init of the page and there is an empty object in array
when I press add button panel-body would not update with new v-for generated elements:
thanks
EDIT:
When I write the code in pure pure html(copy it in code), it look like this, that is a target UI.
EDIT 2:
data :
data() {
return {
payment: {
type: "check",
checks: [{}]
}
}
}
ui :
<div v-for="(check,index) in payment.checks">
<br>
<h5>
index of array ->
{{index}}
</h5>
<div class="form-group">
<label class="col-md-3 control-label">
something
<label style="color:red">*</label>
</label>
<div class="col-md-9">
<input type="text" class="form-control" v-model="check.amount" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">
someting else
<label style="color:red">*</label>
</label>
<div class="col-md-9">
<input type="text" class="form-control" v-model="check.dadada" />
</div>
</div>
<div class="col-lg-8" style="padding-top: 3%;">
<button v-on:click="payment.checks.push({})" class="btn btn-success" style="margin-right: 7%;">
add
</button>
</div>
</div>
Related
I have built a form. I put a button inside this form called "Add a book". When a user clicks two fields appear : "bookname" and "bookdate" :
<div class="form-group col-md-3">
<a class="btn btn-success" onclick="add()" href="#">
<i class="glyphicon glyphicon-plus icon-white"></i>Add a book
</a>
</div>
<div id="wrapper">
<!-- champs du formulaire -->
<div class="form-group col-md-12" id="add" style="display:none;">
<!-- Bookname -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Name of book</label>
<input type="text" class="form-control" id="bookname" name="bookname">
</div>
</div>
<!-- Bookdate -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Date of book</label>
<input type="text" class="form-control" id="bookdate" name="bookdate">
</div>
</div>
</div>
</div>
When there is only one book, there are no problem to validate the form and write the "bookname" and "bookdate" to the project database. It's very common.
My question is : for example if a user clicks 3 times on the "add book" button and fills 3 times the "bookname" and "bookdate" fields , how could I do in the code to save all that into three different lines in the database ?
That is to say :
bookname bookdate
name1 date1
name2 date2
name3 date3
I don't see how i could do ?
Any help would be very appreciated.
Thank you !
You need to change the name attribute on your bookname and bookdate inputs to array notation i.e.
<input type="text" class="form-control" id="bookname" name="bookname[]">
<input type="text" class="form-control" id="bookdate" name="bookdate[]">
Then, in your PHP code, you will find that $_POST['bookname'] and $_POST['bookdate'] are now arrays of values, so you can iterate through them e.g.
foreach ($_POST['bookname'] as $k => $bookname) {
$bookdate = $_POST['bookdate'][$k];
// write bookname and bookdate to database
...
}
How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?
I'm hitting a scoping issue when using the ng-repeat functionality of AngularJS.
please see the plnkr
I have an array of objects 'boxCollection' and a list of items 'itemCollection' which I display in a drop down.
$scope.boxCollection = [];
$scope.itemCollection =
[
{name: 'item1'},
{name: 'item2'},
{name: 'item3'}
];
Now I have my view as
<script type="text/ng-template" id="addBox.html">
<div class="box-controls">
<span class="glyphicon glyphicon-plus pull-left" ng-click="addBox()"></span>
<span class="glyphicon glyphicon-minus pull-left" ng-class="{disable_div:boxCollection.length < 2} " ng-click="removeBox($index)"></span>
</div>
<div class="box-container">
<div class="box-details">
<div class="boxItem">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3">Item</label>
<div class="col-md-8">
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item" ng-disabled="false">
<option value=""> None </option>
</select>
</div>
</div>
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="boxCollection[$index].item.desc ">
</div>
</div>
</form>
</div>
</div>
<div class="clearfix "></div>
</div>
</script>
The view is wrapped in a script tag with an id and is called with an ng-repeat.
I have one function to add a box element into my view 'addBox()'. It generates one entry in 'boxCollection' array and another entry in 'boxTmplList' array. 'boxTmplList' is responsible for showing the views.
Now if you select let's say 'item1' from the drop down in box1 and add a value in the input field, add another box in the view using the '+' button and select 'item1' again in the another instance. It displays the value of input field 1 in the input field 2.
enter image description here
On further analysis I found that Angular tracks the objects with similar 'item' name using the same $hashkey.
I'm using a workaround by adding another property to the object 'boxCollection[$index].itemDesc' instead of 'boxCollection[$index].item.desc' and then later on modify the object using another function, but I feel that's not the most efficient way.
Any insight on this would be greatly appreciated.
You need to change ng-model="boxCollection[$index].item" to ng-model="boxCollection[$index].item.name" , like as-
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item.name" ng-disabled="false">
Working Plnkr
Change ng-model="boxCollection[$index].item.desc" to ng-model="itemCollection[$index].name".
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="itemCollection[$index].name">
</div>
</div>
I have really searched a lot about this, but I still haven't gotten through with my problem. I am creating a calendar (using the plugin fullcalendar and using codeigniter as the backend) that would display a tour and it's specific time span. So, in this case the title of the event would be the tour name, and for the duration of the tour, the start and end dates is to be fetched.
I have already succeeded with the insertion of the data to the database, it's just that the events are not appearing on their respective dates.
These are what I have coded so far:
Controller: Calendar.php
function view_tours(){
$this->load->model('Calendar_model');
$tours = $this->Calendar_model->getTours();
echo json_encode($tours);
}
function add_tour(){
$sdate = $this->input->post('start_date'); //start date
$edate = $this->input->post('end_date'); //end date
if($this->form_validation->run() == TRUE){ //column name in db=>name in form
$tour = array('tour_name' => $this->input->post('tour_name'),
'start_date' => date('Y-m-d', strtotime($sdate)),
'end_date' => date('Y-m-d', strtotime($edate)),
'slots' => $this->input->post('slots'),
'rate' => $this->input->post('rate'),);
$this->Calendar_model->insert_tour($tour);
echo 'success';
}
else {
redirect(base_url().'Calendar');
echo "error";
}
}
Model: Calendar_model.php
public function getTours(){
$query = $this->db->get('tours');
return $query -> result_array();
}
function insert_tour($tour){
$this->db->insert('tours', $tour);
return $this->db->insert_id();
}
View: home.php (This is the html file)
<div id="AddModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"> Add a Tour </h4>
</div>
<div id="modalBody" class="modal-body">
<?php
echo validation_errors();
?>
<form class="form-horizontal" id="crud-form" method="POST" action="<?php echo base_url();?>Calendar/add_tour">
<div class="form-group">
<label class="col-md-4 control-label" for="tour_name">Tour Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="tour_name" name="tour_name"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="start_date">Start Date</label>
<div class="col-md-4">
<input type="date" class="form-control" id="start_date" name="start_date"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="end_date">End Date</label>
<div class="col-md-4">
<input type="date" class="form-control" id="end_date" name="end_date"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="slots">Slots</label>
<div class="col-md-4">
<input type="text" class="form-control" id="slots" name="slots"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="rate">Rate</label>
<div class="col-md-4">
<input type="text" class="form-control" id="rate" name="rate"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="color">Color</label>
<div class="col-md-4">
<input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
<span class="help-block">Click to pick a color</span>
</div>
</div>
<button type="submit" class="btn btn-primary"> Add Tour</button>
</form>
</div> <!--end of modal body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have recently edited this but this does not work.
JS File: main.js I have tried fetching data using the $.ajax options but when i do this, the calendar itself does not appear. What is wrong with the code? I am just a beginner with ajax.
events: {
url: base_url+'Calendar/view_tours',
type: 'POST',
data{
title: tour_name,
start: start_date,
end: end_date
},error: function(){
alert('error in fetching from database!');
}
}, //end of events
I just pasted a snippet of the js. I know that the calendar is "somehow" retrieving data from the database because i can see the events, BUT, it only appears on the current date in real time and shows the current time, for all events added. And i have added a tool tip to see if the tour name (title) is being read, and it is.
Here's what the actual results are: click to see image
Summary of problem: Events are not in their respective dates and the time added is on realtime.
So it seems like your problem is that the JSON object returned by your URL has unrecognizable data for fullCalendar. So you'll have to fetch events like this:
events: base_url+'Calendar/view_tours',
And change the columns of your data base from tour_id to id, tour_name to title, start_date to start and end_date to end. This will create the correct JSON object.
I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do