so I created a button to open a calendar with an ng-click function:
<button type="button" class="btn btn-default" ng-click="main.open_date()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
I put it inside an ng-repeat, and when I added more fields & tested the button, this happened:
Aren't rows created by ng-repeat unique because they have their own index?
What am I missing here?
update: here is the code for my main.open_date():
me.open_date = function(key){
if(!key){key='date';}
me.uibdates[key] = true;
}
template code:
<tr ng-repeat="detail in main.employee_details track by $index">
<td>
<ui-select ng-model="detail.status" theme="bootstrap">
<ui-select-match placeholder="Select status" allow-clear>{$$select.selected.name$}</ui-select-match>
<ui-select-choices repeat="status in main.status | propsFilter: {name: $select.search} | limitTo: 100">
<div ng-bind-html="status.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</td>
<td>
<p class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="main.open_date()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<input type="text" class="form-control" placeholder="Select date"
uib-datepicker-popup="MM/dd/yyyy"
ng-model="detail.date" is-open="main.uibdates['date']"
ng-change="main.date_change()" />
</p>
</td>
<td>
<input type="text" class="form-control" ng-model="detail.remark" placeholder="">
</td>
<td>
<button style="display: inline; width: 35px;"class="form-control btn btn-primary btn-sm" ng-click="main.add_field($index);" ng-if="$index == (main.employee_details.length - 1)">
<span class="glyphicon glyphicon-plus"></span>
</button>
<button style="display: inline; width: 35px;" class="form-control btn btn-danger btn-sm" ng-click="main.delete_field($index);" ng-if="main.employee_details.length != 1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
In my imagine, you can customize your code:
HTML:
<div ng-repeat="item in listItems track by item.id + $index">
<input class="datetime-picker" id="datepicker_{{item.id}}" />
<button ng-click="main.open_date(item.id)" class="open-datetime-picker">Open</button>
</div>
Angularjs
main.open_date = function(id){
$("datepicker_" + id).datetimepicker();
}
Everything inside the ng-repeat are repeated except the index. If you didn't use the index, the button is not unique.
in function main.open_date() can you use id instead class or html tags
like this
$('#datetimepicker1').datetimepicker();
Did you add $index in ng-repeat? Example: <div ng-repeat="item in listItems track by $index"></div>
Or, if your item have an ID field: <div ng-repeat="item in listItems track by item.id + $index"></div>
Related
Is possible to hide the result of this table and just show the filtered result?
<table class="table table-responsive"
ng-class="{'table-striped':!spinnerVisible}">
<thead class="thead-inverse">
<tr>
<th><input type="checkbox" value="selected"
ng-model="checkboxes.checkAll"
ng-click="checkAllRows()"></th>
<th>SID</th>
<th>Name</th>
<th>Pathway</th>
<th>Advisor</th>
<th>Credits</th>
<th>Campus</th>
<th ng-if="isPathwayLead">Action</th>
</tr>
</thead>
<tr ng-repeat="s in searchData.students
|orderBy:'lastName'
|filter:search
|range:selectedPage:pageSize"
student-row>
</tr>
</table>
By default the page load a list of students like this
[![enter image description here][1]][1]
I would like to hide this list and just show the result of the filter above!
is that possible?
Student row
<tr ng-class="{awesome:s.selected}">
<td><input name="checker" type="checkbox" value="selected" ng-model="s.selected"></td>
<td><a class="clickableAwesomeFont" ng-click="toStudent(s.sid)">{{s.sid}}</a></td>
<td>{{s.lastName.trim() + ', ' + s.firstName}}</td>
<td>{{s.pathwayName + (s.subPathwayName ? ', ' + s.subPathwayName : '')}}</td>
<td>{{s.advisorName}}</td>
<td>{{s.credits}}</td>
<td>{{s.branchCodeDescription}}</td>
<td ng-if="isPathwayLead"><span class="card-title fa fa-pencil-square-o pull-right clickableAwesomeFont" ng-click="popupReviewForm(s)"></span></td>
SearchFilter
<div>
<div style="padding-top:100px;" id="mid_container" class="container">
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-6">
<label for="search-term">Search</label>
<input id="search-term" type="text" ng-
keyup="$event.keyCode == 13 && commenceSearch()" ng-
model="searchModel.searchTerm"
class="form-control" placeholder="Name or SID"
aria-describedby="sizing-addon3">
<label for="pathway_dd">Pathway</label>
<select id="pathway_dd" class="form-control custom" ng-
change=onPathwayChange() ng-options="p.id as p.name for p in
pathways"
ng-model="searchModel.pathwayID">
<option value="">Select Pathway</option>
</select>
<label for="subPathway_dd">Area of Interest</label>
<select id="subPathway_dd" class="form-control custom" ng-
options="sp.id as sp.name for sp in subPathways" ng-
model="searchModel.subPathwayID">
<option value="">Select Area of Interest</option>
</select>
</div>
<div class="col-md-5 col-sm-6 col-xs-6">
<label for="advisor_dd">Advisor</label>
<select id="advisor_dd" class="form-control custom" ng-
model="searchModel.advisorSID">
<option value="">Select Advisor</option>
<option value="noadvisor">No Advisor</option>
<option ng-repeat="a in advisors| orderBy:'lastName'"
value="{{a.sid}}">{{a.lastName + ', ' + a.firstName}}</option>
</select>
<label for="credit-select">Credits</label>
<select id="credit-select" class="form-control custom" ng-
model="searchModel.creditID" value="c.id" ng-options="c.id as
c.text for c in credits" />
<label for="campus_dd">Campus</label>
<select id="campus_dd" class="form-control custom" ng-
model="searchModel.branchCode">
<option value="">Select Campus</option>
<option ng-repeat="b in branches" value="
{{b.branchCode}}">{{b.description}}</option>
</select>
</div>
<div class="col-md-2 col-sm-12 col-xs-12">
<div class="checkbox">
<label>
<input ng-model="searchModel.isEnrolled"
type="checkbox">Enrolled
</label>
</div>
<div class="checkbox">
<label>
<input ng-model="searchModel.isMandatory"
type="checkbox">Mandatory
</label>
</div>
<button class="btn btn-primary btn-lg btn-block" ng-
click="commenceSearch()"><span class="glyphicon glyphicon-search"
title="Apply Search Filters" /> Search</button><br />
<button class="btn btn-default btn-sm" ng-
click="clearSearch()"><span class="glyphicon glyphicon-refresh"
title="Reset Search Filters" /> Reset</button>
<!--<button class="btn btn-default btn-sm" ng-
click="toggleFilter()"><span class="glyphicon glyphicon-remove"
title="Close Search Filter Panel" /> Close</button>-->
</div>
</div>
</div>
</div>
Basically just want to know if i can use ng-Show just to show filtered results and hide the rest without having to changes a lot of everything
I am sharing the way I normally do where there's a need for searching among the grid list. I normally, take one input as a search term and search the entire list with the help of $filter in my watcher and if it matches with any key of the particular object, update the grid list instantly with the new filtered list.
I don't recommend copy pasting the code since I am using many custom directives and material design. But you can get the main idea how can you do it.
<md-toolbar style="background-color:#F57C00 !important;"
ng-show="showSearch">
<div class="md-toolbar-tools">
<md-input-container class="md-block" flex-gt-sm>
<md-icon style="color:white">search</md-icon>
<input type="text" ng-model="searchPhrase" style="color:white" name="searchPhrase">
</md-input-container>
<md-button ng-click="resetFilter()" class="md-icon-button">
<md-tooltip style="background-color:lightgray;color:black" md-direction="top">close</md-tooltip>
<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
in my controller I write the watcher as :
$scope.$watch('searchPhrase', function (keyword) {
if (keyword!= null && keyword!= '' && keyword!= undefined)
$scope.gridList = ($filter('filter')($scope.actualGridList, keyword));
// incase keyword was empty, change the list back to original
else
$scope.gridList = angular.copy($scope.actualGridList);
});
//incase reset button was pressed, change the list back to original
$scope.resetFilter = function () {
$scope.showSearch = false;
$scope.searchPhrase = '';
$scope.gridList = angular.copy($scope.actualGridList);
}
Note that:
I am using gridlist as the ng-repeat list and not the actualGridList, in this way I will have the original list unmodified and gridList will be reflected back to what the original list is through my resetFilter()
If you want to filter the searchData.students based on many keywords, you can filter the list based on those keys, something similar to:
$scope.copStudents = $filter('filter')($scope.searchData.students,
{ 'name': keyword }, true);
in there i want to add shopping cart in my project. i have try make it but its still want work.
this my controller :
function postCreate(){
echo '<pre>';
print_r(Request::all());
exit;
$data['list'] = DB::table('package')
->join("cms_car","cms_car.id","=","package.id_cms_car")
->join("zone","zone.id","=","package.id_zone")
->select("package.*","cms_car.car as name_car","cms_car.photo as car_photo");
return view('detail',$data);
}
and here my view for listing :
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-petrol.png') }}" style="max-width:15px;">
#else
#endif
{{$row->driver}}</p>
<p>
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-driver.png') }}"style="max-width:15px;">
#else
#endif
{{$row->fuel}}</p>
<h6 class="post-price">price :</h6>
<p>Rp. {{$row->price}}</p>
</div>
</div>
<hr>
<div class="col-md-6">
Unit Quality :<br><br>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity" class="form-control input-number" value="1" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-6">
<h3 style="margin-top:40px" id="price{{$row->id}}">Rp. {{number_format($row->price)}}</h3>
</div>
</div>
</div>
#endforeach
in there i want to make cart it only add when i change the unit quantity
form input name : quantity
have someone tell me what improvements do i have to make to the code to achieve my goal?
I recommend using this package Crinsane/LaravelShoppingcart
There are somany shopping cart module available on github. They are very easy to integrate, try one of them:
LaravelShoppingcart
laravel-cart
I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);
i'm working on AngularJS
I have this problem:
screenshoot
In HTML i used this code for show submit button for two type of form.
One for TEXT Form and one for ENUM Form:
<div ng-controller="githubController3">
<div ng-repeat="x in names | limitTo:1">
<br>
<p>
<h3>{{ x.name }}</h3></p>
</div>
</div>
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm()">
<a ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ name }} </input>
</a>
<a ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</a>
<br>
<a ng-if="x.type=='long'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
<!--NEL CASO DI ENUM PRESENTA QUESTO FORM-->
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm2()">
<a ng-if="x.type=='enum'">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit Enum!
</button>
</div>
</div>
</form>
How I can show only one submit button instead of multiple repetition of it ?
thanks to all
Error in this line you write submit form inside ng-repeat. It will repeat how much data in names array.
<div ng-repeat="x in names">
Remove ng-repeat then it show only one submit button
<tr ng-form="fbForm_{{$index}}">
<td><center><p ng-hide="fb.editMode">{{fb.clientId}}</p>
<input type="text" class="form-control" name="clientId" ng-show="fb.editMode" required
ng-model="fb.clientId"/></center>
<span ng-show="fbForm_{{$index}}.clientId.$dirty && fbForm_{{$index}}.clientId.$error.required">Client Id is required.</span>
</td>
<td><center><p ng-hide="fb.editMode">{{fb.clientSecret}}</p>
<input type="text" class="form-control" name="clientSecret" ng-show="fb.editMode" required
ng-model="fb.clientSecret"/></center>
<span ng-show="fbForm_{{$index}}.clientSecret.$dirty && fbForm_{{$index}}.clientSecret.$error.required">Client secret is required.</span>
</td>
<td style="width:10%">
<p ng-hide="fb.editMode"><a ng-click="toggleEdit()" href="javascript:;">Edit</a> | <a ng-click="deletefacebook()" href="javascript:;">Delete</a></p>
<p ng-show="fb.editMode"><a class="btn btn-primary simple_button" ng-disabled="fbForm_{{$index}}.$pristine || fbForm_{{$index}}.$invalid" data-ng-click="save($index); fbForm_{{$index}}.$setPristine()" href="javascript:;">Save</a> | <a class="btn btn-primary simple_button" ng-click="cancel($index,fb.fbConfigId)" href="javascript:;">Cancel</a></p>
</td>
</tr>
http://plnkr.co/edit/LnnJQj1WwQaxLjlIWXq2?p=preview
for ng-disabled I am able to use {{$index}}
Getting syntax error in pristine function form name.
ngDisabled and ngClick directives expect expressions, so it should be something like this:
ng-disabled="this['fbForm_' + $index].$pristine || this['fbForm_' + $index].$invalid"
ng-click="save($index); this['fbForm_' + $index].$setPristine()"