angular (jquery timepicker) unable to get value of input - javascript

I want to make a custom directive with the jquery plugin timepicker. I'm not getting the input value in the console, it says undefined.
here's a plunkr
<table class="table table-bordered">
<thead>
<tr>
<th>Time From</th>
<th>Time To</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" ng-model="row1" size=6/ disabled>
</td>
<td>
<input type="text" ng-model="dup_row1 " size=6 timepicki/>
{{dup_row1}}
</td>
</tr>
</tbody>
</table>
var app = angular.module('myApp', []);
app.directive('timepicki', [
function() {
var link;
link = function(scope, element, attr, ngModel) {
element.timepicki();
};
return {
restrict: 'A',
link: link,
require: 'ngModel'
};
}
])
app.controller('ctrl', function($scope) {
$scope.row1 = "00:00"
$scope.submit=function(){
console.log($scope.dup_row1)
}
});

The code you've posted is not the same as the code in your plunker.
The AngularJS Developer Guide says;
Use controllers to:
Set up the initial state of the $scope object.
In your example above, you log the value of $scope.dup_row1 on submit, but your controller never sets that value, and as such it is undefined.
The following will print "hello" to the console;
app.controller('ctrl', function($scope) {
$scope.row1 = "00:00"
$scope.dup_row1 = "hello"
$scope.submit=function(){
console.log($scope.dup_row1)
}
});

Related

Why is my textbox not displaying data from AngularJS controller

In my application, I can verify that the correct info is being selected by using a console.log, but trying to display this info in a form textbox isn't working. Can someone please tell me what I'm doing wrong?
Here is me view's HTML.
<table class="table table-stripped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="organization in organizations | filter:search" data-ng-click="navToEdit($index)">
<td>{{organization.Id}}</td>
<td>{{organization.Title}}</td>
</tr>
</tbody>
</table>
Here is what clicking an item in that list takes you to.
<div class="form-group">
<label for="txtTitle">Title:</label>
<input type="text" type="text" id="txtTitle" class="form-control" data-ng-model="organization.Title" />
</div>
Here is my controller.
app.controller("organizationsCtrl", ["$scope", "$location", "$routeParams", "spService",
function ($scope, $location, $routeParams, spService) {
var listTitle = "Organizations";
$scope.editing = false;
//example populating Organizations
spService.getRecords(listTitle, "?$select=ID,Title").then(function (result) {
$scope.organizations = result;
});
$scope.navToAdd = function() {
$location.path("/organizations/add");
}
$scope.navToEdit = function(index) {
$scope.organization = $scope.organizations[index];
$location.path("/organizations/" + index);
console.log($scope.organization.Title);
}
}
]);
$scope.navToEdit does output the correct organization, but the textbox of txtTitle doesn't show anything.
Please help!!
As i see , the problem here is you are redirecting to another page here,
$location.path("/organizations/" + index);
which will clear the existing scope within the controller, if you want to transfer the data from one page to another use service or localStorage.

failing to store data in local storage on table data change

New to using Angular local storage and I am unable to store data in local storage after data in the table changes.
I have read their instructions and have got their demo working in my own environment, but that is watching for change when a user types a character into an input field. I need it to watch for change in the <tr>/<td> and then store it in local storage.
When I log the value that is passed to the function it returns `null'. The data that populates the table is dynamic, changing depending on what item a user clicks on. Any idea why the data that is loaded into the table isn't being stored?
UPDATE
Included the service in which I gather the data on ng-click. The id displays in the table cell but:
I have had to use an <input> inside the table cell
No data is binded to the cell at the moment, but it needs to be
When I refresh the page, the table headings are displayed, but the data still disappears
Storing each individual item isn't the most efficient approach
I will label the two html templates I have. First one (list-patents.htm) is the table which displays the items. When a user clicks on an item, a second template (patent-item.htm) below the table loads into ng-view displaying relevant information.
var app = angular.module('myApp', ['ngRoute', 'ui.router', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', 'localStorageServiceProvider', function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('demoPrefix')
$urlRouterProvider
.when('', '/patents/list-patents')
.when('/', '/patents/list-patents')
.when('/patents', '/patents/list-patents')
.when('/transactions', '/transactions/current-transactions')
.otherwise('/patents/list-patents');
$stateProvider
.state("patents", {
url: "/patents",
templateUrl: "templates/patents/patent-nav.htm",
controller: "patentListCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/patents/list/list-patents.htm",
controller: "patentListCtrl"
})
.state("patents.list.item", {
url: "/patent-item",
templateUrl: "templates/patents/list/patent-item.htm",
params: {
//load of params
},
controller: "patentItemCtrl"
})
}];
app.factory('loadPatentItemService', ['$http', '$timeout', function($http, $timeout) {
var factory = {};
var selectedItem = null;
factory.select = function(item) {
factory.storeSelect = [];
selectedItem = item;
factory.storeSelect.push(selectedItem)
factory.getPatent();
return [selectedItem];
}
}])
app.controller('patentItemCtrl', ['$scope', 'patentTabService', 'patentCheckboxService', 'localStorageService', 'loadPatentItemService', function($scope, patentTabFactory, patentCheckboxService, localStorageService, loadPatentItemService){
var testid = loadPatentItemService.storeSelect[0].id;
$scope.$watch('itemStorage', function(){ //watch for change, value passed to function
localStorageService.set('itemStorage', testid); //set value of property (what user typed in)
$scope.localStorageDemoValue = localStorageService.get('itemStorage');
});
$scope.$watch(function(){
return localStorageService.get('itemStorage');
}, function(){
$scope.itemStorage = testid;
});
}])
list-patents.htm
<div class="row">
<div class="col-md-12">
<table>
<thead>
<tr>
<td class="align-middle">Application No. </td>
<td class="align-middle">Client Ref</td>
<td class="align-middle">Cost now</td>
<td class="align-middle">Cost band end</td>
<td class="align-middle">Cost next</td>
<td class="align-middle">Renewal Date</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patents">
<td ng-click="select(x)"><a ui-sref="patents.list.item({id: x.id, patentApplicationNumber: x.patentApplicationNumber, clientRef: x.clientRef, renewalStatus: x.renewalStatus, currentRenewalCost: x.currentRenewalCost, costBandEndDate: x.costBandEndDate, renewalCostNextStage: x.renewalCostNextStage, renewalDueDate: x.renewalDueDate, shortTitle: x.shortTitle, primaryApplicantName: x.primaryApplicantName, patentPublicationNumber: x.patentPublicationNumber, title: x.title, filingDate: x.filingDate, epoPatentStatus: x.epoPatentStatus})">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.currentRenewalCost">$</td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
<div ui-view></div>
</div>
</div>
patent-item.htm
<div class="col-md-6 text-xs-center" ng-controller="patentItemCtrl">
<h2>Application Number</h2>
<table class="table table-striped">
<thead>
<tr class="font-weight-bold">
<td>applicationNumber</td>
<td>clientRef</td>
<td>renewalStatus</td>
<td>costBandEndDate</td>
<td>renewalCostNextStage</td>
<td>renewalDueDate</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patentItem">
<td><input type="text" ng-model="itemStorage" placeholder="Start typing..." readonly></td>
<td><input type="text" ng-model="x.clientRef" placeholder="Start typing..." readonly></td>
<td ng-bind="x.renewalStatus"></td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
</div>

Div not showing on ng-click of element returned by custom directive

I have created a directive in which a table html is returned successfully. One of the columns is anchor link <td><a ng-click="showLogDiv()">Show Modified Data</a></td> on whose click i want to show a div containing further data belonging to that row but it doesnot show.
//logdetails.html - the templateUrl proprerty of my directive
<div>
<table class="table table-hover table-responsive">
<thead class="table-thead">
<tr style="background-color:#56a7d6">
<th>AccessLogId</th>
<th>EntityName</th>
<th>EntityId</th>
<th>RequestType</th>
<th>Modified Data</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in viewData.logdata">
<td>{{value.AccessLogId}}</td>
<td>{{value.EntityName}}</td>
<td>{{value.EntityId}}</td>
<td>{{value.RequestType}}</td>
<!--<td><a ng-click="showLogDetails({{value.ModifiedData| json}})">Show Modified Data</a></td>-->
<td><a ng-click="showLogDiv()">Show Modified Data</a></td>
<td>{{value.CreatedDate | date:'medium'}}</td>
</tr>
</tbody>
</table>
<!--<div ng-show="divShow">Hello</div> I want to show {{value.ModifiedData| json}} contents here but even hardcoded Hello value not shown -->
<div ng-show="divShow">Hello</div>
</div>
In controller i have
$scope.divShow = false;
$scope.showLogDiv = function () {
alert($scope.divShow);
$scope.divShow = true;
alert($scope.divShow);
};
My directive
.directive("myActivityLogs", function () {
return {
restrict: 'E',
replace: 'true',
//template: '<div></div>',
//template: '<b>{{viewData.logdata[1].ModifiedData}}</b>'
templateUrl: 'app/modules/appScreen/logdetails.html'
//scope: {
// logsData:'='
//},
//link: function (scope, element, attrs) {
//link: function () {
// alert(viewData.logdata);
//}
};
});
How to hide/show part of html returned by directive and also how can i bind data to that part?
I am new to angularjs and nothing makes sense right now so maybe i am doing things wrong way so please explain in detail it would be very helpful.
One way to do this is to use a directive controller. You can change your directive like this:
.directive("myDirective", function() {
return {
restrict: 'E',
replace: 'true',
templateUrl: './logdetails.html',
scope: {
viewData: '='
},
controller: function($scope) {
$scope.divShow = false;
this.showLogDiv = function() {
$scope.divShow = true;
};
},
controllerAs: 'ctrl'
};
})
And then change your template HTML as the following so that it uses the controller:
<div>
<table class="table table-hover table-responsive">
<thead class="table-thead">
<tr style="background-color:#56a7d6">
<th>AccessLogId</th>
<th>EntityName</th>
<th>EntityId</th>
<th>RequestType</th>
<th>Modified Data</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="value in viewData.logdata">
<td>{{value.AccessLogId}}</td>
<td>{{value.EntityName}}</td>
<td>{{value.EntityId}}</td>
<td>{{value.RequestType}}</td>
<td><a href ng-click="ctrl.showLogDiv()">Show Modified Data</a></td>
<td>{{value.CreatedDate | date:'medium'}}</td>
</tr>
</tbody>
</table>
<div ng-show="divShow">Hello</div>
</div>
Notice that I've used <a href ng-click="ctrl.showLogDiv()">. You can refer to this working plunker to know more.

ng-click on <tr> doing nothing

I have consulted these related articles, but the presented solutions do not work:
Clickable bootstrap row with angular
Adding parameter to ng-click function inside ng-repeat doesn't seem to work
Angular ng-click not working in div
Here is my plunkr:: http://plnkr.co/edit/kha6mAKDBtrY0XtTc6Wp?p=preview
<body ng-controller="MainCtrl">
<table>
<caption>Troubles with ng-repeat and ng-click</caption>
<thead>
<tr>
<th>Name</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-click="alert('hi')">
<td>{{employee.name}}</td>
<td>{{employee.occupation}}</td>
</tr>
</tbody>
</table>
var app = angular.module("plunker", []);
app.controller("MainCtrl", function($scope) {
$scope.employees = [
{
name: "John Doe",
occupation: "Miner"
},
{
name: "Theressa",
occupation: "Construction Worker"
}
]
});
It does work, but alert is not part of your $scope so it won't do anything.
You can add it in your controller:
$scope.alert = function(message) { alert(message); }

Changing JQuery function into AngularJS

I am changing a user list/table I made with Razor and JQuery into AngularJS. One of the features of this table was the ability to show/hide additional user details. The table had two sets of tr with the second one being display:none but would slide down/be visible when its above tr was clicked to show details.
Example (Original) Working Example
I tried to apply the code onto my AngularJS but it does not seem to work for some reason (no errors either)
Original Code (skeleton)
<table>
<tr class="col-xs-12">
<td class="col-xs-2">#Html.DisplayFor(modelItem => item.name)</td>
<td class="col-xs-2">#Html.DisplayFor(modelItem => item.email)</td>
// ect...
</tr>
<tr class="col-xs-12" style="display:none">
<td colspan="12">
<p>
#Html.DisplayFor(other stuff)
</p>
</td>
</tr>
</table>
New AngularJS Code
<table class="table table-striped col-xs-12">
<tbody ng-repeat="actors in Users">
<tr class="col-xs-12">
<td class="col-xs-2">{{actors.name}}</td>
<td class="col-xs-2">{{actors.email}}</td>
// ect...
</tr>
<tr class="col-xs-12" style="display:none">
<td colspan="6">
<p>
{{actors.otherThings}}
</p>
</td>
</tr>
</tbody>
</table>
JQuery (Original had td[colspan=12] instead of td[colspan=6])
<script>
// Toggle Additional Details
$(function () {
$("td[colspan=6]").find("p").hide();
$("td[colspan=6]").addClass("nopadding");
// && !$(e.target).is('span')
$("tr").click(function (e) {
if (!$(e.target).is('button') && !$(e.target).is('input') && !$(e.target).is('select')) {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=6]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=6]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
}
});
});
</script>
CSS
/* Removes padding from interactive rows */
.table > tbody > tr > td.nopadding {
padding: 0px;
}
I am still new to AngularJS so maybe I am missing something simple, but I just want to be able to expand show/hide the additional tr. Not sure why it does not work for my Angular code.
AngularJS
var app = angular.module("app", ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'HomeController'
})
.when('/home', {
templateUrl: '/pages/home.html',
controller: 'HomeController'
})
.when('/unknown', {
templateUrl: '/pages/unknown.html',
controller: 'UnknownController'
})
.otherwise({
templateUrl: '/pages/home.html',
controller: 'HomeController'
});
});
app.factory('userService', function ($http) {
var userService = {};
userService.getUsers = function () {
return $http({
url: '/API/APITest',
method: "GET"
})
}
return userService;
});
app.controller('HomeController', function ($scope, userService, $resource, $http) {
$scope.orderByField = 'name';
$scope.reverseSort = false;
$scope.ordering = "(ascending)";
$scope.orderByFieldFunction = function (value) {
$scope.reverseSort = !$scope.reverseSort;
$scope.orderByField = value;
if ($scope.reverseSort === false) {
$scope.ordering = "(ascending)";
} else {
$scope.ordering = "(descending)";
}
}
userService.getUsers().success(function (users) {
$scope.Users = users;
});
});
app.controller('UnknownController', function ($scope, userService, $resource, $http) {
$scope.title = "404 - Does Not Exist";
});
You can add the jQuery in a directive like this, if this is what you're after:
Example: http://jsfiddle.net/58mLfw6z/
AngularJS Directive
app.directive('showmore',function() {
return {
restrict:'A',
link: function(scope,element,attr) {
element.on('click',function() {
element.next('tr').toggle();
});
}
}
});
// or apply a flag to the model with an ng-click on the tr
$scope.more = function(actor) {
if (!actor.more) {
actor.more = true;
}
else {
actor.more = false;
}
};
HTML
<table>
<tbody ng-repeat="actors in Users">
<tr showmore ng-click="more(actors)">
<td class="col-xs-2">{{actors.name}}</td>
<td class="col-xs-2">{{actors.email}}</td>
</tr>
<tr style="display:none;">
<td colspan="2">
<p>
{{actors.otherThings}}
</p>
</td>
</tr>
</tbody>
</table>
I think OP already has found the answer. This post is just to say that ng-repeat has its own scope, an isolated scope.
In this plnkr, http://jsfiddle.net/aanders50/HB7LU/5497/, which OP posted in the comment
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody ng-repeat="actors in Users">
<tr ng-click="showDetails = ! showDetails">
<td>{{actors.name}}</td>
<td>{{actors.email}}</td>
</tr>
<tr ng-show="showDetails" style="background-color:rgba(0, 255, 255, 0.2)">
<td colspan="2">
<p>birthday: {{actors.birthday}}</p>
</td>
</tr>
</tbody>
</table>
showDetails are bound to each tbody where ng-repeat is defined. Thus, each table has its own $scope.showDetails

Categories