I need to get data from $scope.List2 object:
<div ng-app="App">
<div id="firstlist" ng-controller="Controller">
<table id="requesttable" class="RequestTable">
<tr ng-repeat="item2 in List2">
<td class="selectedItem">{{item2.Title}}</td>
</tr>
</table>
<button id="Reqbutton" onclick="SendRequest()">Send</button>
</div>
</div>
The problem is that if I put SendRequest function inside controller then it cannot be called (I get "SendRequest() is not defined" message). And if I put the function outside the controller I cannot access List2.
What do I miss?
As #sp00m suggested. You should use ng-click instead of onclick on the button. The html would look like this then:
<button id="Reqbutton" ng-click="sendRequest()">Send</button>
In your controller
app.controller('testController', ['$scope', function {
$scope.list2 = [];
$scope.sendRequest = function() {
var test = $scope.list2;
...
};
}]);
Related
I want to achieve a scenario in which when i click TV1 radiobutton i want to get all of its children in the object i.e ProductName TV1, Number Of Channels 1 . Below is my code
Markup :
<div ng-repeat="product in ProductTypes">
<div ng-show="product.selected" ng-repeat="Product in product.ProductList">
<label>
<input type="radio" name="internetProduct{{$parent.$index}}"
ng-model="Product" ng-value="{{Product}}" ng-click="GetValue()" />
{{Product.ProductName}}
</label>
<table>
<tr ng-repeat="(key, val) in Product">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</table>
</div>
</div>
Controller (js) :
var app = angular.module('ProductCatalog.controllers', ['ui.bootstrap'])
.controller('OfferCtrlr', function ($scope, $http, $modal) {
$scope.GetValue = function() {
var a = $scope.radio;
}
})
Right now, nothing is coming in $scope.radio. Please helpp.
You can pass the product instance to your ng-click function call as a parameter. So whenever the radio button is clicked, the corresponding product instance will be available inside your function. The below code will give you the instance for radio button. Do the same thing for checkbox, call a function on checking and pass the corresponding instance.(you have not provided the markup for checkbox)
HTML:
<div ng-repeat="product in ProductTypes">
<div ng-show="product.selected" ng-repeat="Product in product.ProductList">
<label>
<input type="radio" name="internetProduct{{$parent.$index}}"
ng-model="checked" ng-value="Product" ng-click="GetValue(Product)" />
{{Product.ProductName}}
</label>
<table>
<tr ng-repeat="(key, val) in Product">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</table>
</div>
</div>
JS:
var app = angular.module('ProductCatalog.controllers', ['ui.bootstrap'])
.controller('OfferCtrlr', function ($scope, $http, $modal) {
$scope.GetValue = function(product) {
console.log(product);
}
})
Well, Load all the parent and child objects then show/hide through the AngularJS, through that you will achieve your scenario.
I am new to angularjs.
When I click on "Click Me" the toggle method is called. The value of test changes from false to true, but ng-hide is not acknowledging the new value of test.
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td><span ng-hide="{{test}}">Testing</**strong text**td>
<td><span>hello</span></td>
</tr>
<tr>
<td style="cursor:pointer"><span ng-click="toggle()">Click Me</td>
<td><span>hello</span></td>
</tr>
</table>
</div>
script.js
var appX = angular.module('myApp', []);
appX.controller('myCtrl', function($scope){
$scope.test = false;
$scope.toggle = function(){
$scope.test = true;
console.log("toggle is working");
};
});
test is not an expression, so remove the curly braces,
<td><span ng-hide="test">Testing</**strong text**td>
Its a syntax error. You are combining both expression binding and directive binding. Below code should work.
Replace ng-hide="{{test}} with ng-hide-"test"
You don't need to tell that you are writing a angular code inside ng-hide as that is already angular directive, it will ditect test variable itself, so don't need to provide a braces over there to.
Simply try like : ng-hide="test"
The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.
Since it accepts expression so no need of curly braces!
Change:
ng-hide="{{test}}"
to
ng-hide="test"
You need to use curly braces if the directive was expecting string instead of expression as an attribute value.
Fore more info refer Angular Docs.
Some code changes :
You forgot to close the </span>
<span ng-hide="test">Testing</span>
Remove **strong text** from the closing </td> element.
<td><span ng-hide="test">Testing</span></td>
Ass suggested by Sajeetharan, test is not an expression, so remove the curly braces.
<td><span ng-hide="test">Testing</span></td>
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.test = false;
$scope.toggle = function(){
$scope.test = true;
console.log("toggle is working");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr>
<td><span ng-hide="test">Testing</span></td>
<td><span>hello</span></td>
</tr>
<tr>
<td style="cursor:pointer"><span ng-click="toggle()">Click Me</span></td>
<td><span>hello</span></td>
</tr>
</table>
</div>
I am using angularjs ngresource to fetch a list of data from database on button click. But when i click button nothing happens. What i am doing wrong.
app.js
'use strict';
var App = angular.module('app',['ngResource']);
graph_service.js
'use strict';
App.factory('Graph', ['$resource', function ($resource) {
return $resource(
'http://localhost:8080/SPsystem/stats'
);
}]);
graph_controller.js
'use strict';
App.controller('GraphController', ['$scope', 'Graph', function($scope, Graph) {
var self = this;
self.graph= new Graph();
self.graphs=[];
self.fetchAllstats = function(){
self.graphs = Graph.query();
}
}]);
minimal html
<body ng-app="app" class="ng-cloak">
<div class="generic-container" ng-controller="GraphController as ctrl">
<div class="panel panel-default">
<div>
<input type="button" ng-click="fetchAllstats()" value="Fetch" class="btn btn-success">
</div>
<div class="panel-heading"><span class="lead">List</span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>x</th>
<th>y</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in ctrl.graphs">
<td>{{g.x}}</td>
<td>{{g.y}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
You don't have a method named query in your factory,
Change your factory like this,
App.factory('Graph', ['$resource', function ($resource) {
{
// Resource object
var resource = $resource('http://localhost:8080/SPsystem/stats');
/* Custom function to retrieve a issue list*/
resource.query= function () {
return this.query()
};
return resource;
})
Im trying to get a client list and detail view to work but i cant seem to figure it out. The NG-init wont work nor will the ng-click, I can get it to work if its hard coded, but when dynamically loading data it wont work. Id appreciate if anyone can point out the correct way to execute this.
html:
<div ng-controller="ClientCtrl as clients">
<table class="listview">
<tbody>
<tr ng-repeat="stuff in clients.records">
<td><a ng-click="client = {{$index}}" class="client-link">{{stuff.first_name}} {{stuff.last_name}}</a></td>
</tr>
</tbody>
</table>
<div class="detailview">
<div ng-repeat-start="things in clients.records " ng-if="$first">
<div id="contact-{{$index}}" class="tab-pane active" ng-show="client == {{$index}}" ng-init="client = {{$index}}">
<h2>{{things.first_name}} {{things.last_name}}</h2>
</div>
</div>
<div ng-repeat-end="things in clients.records " ng-if="!$first">
<div id="contact-{{$index}}" class="tab-pane active" ng-show="client == {{$index}}" ng-init="client = {{$index}}">
<h2>{{things.first_name}} {{things.last_name}}</h2>
</div>
</div>
</div>
</div>
controller.js:
function ClientCtrl($scope,$http,$interval, $rootScope){
var ClientCtrlData = this;
$http.get("api/clients").success(function(response) {
ClientCtrlData.records = response.records;
});
var promise;
// simulated items array
$scope.items = [];
// starts the interval
$scope.start = function() {
// stops any running interval to avoid two intervals running at the same time
$scope.stop();
// store the interval promise
promise = $interval(
function(){
$http.get("api/clients").success(function(response) {
ClientCtrlData.records = response.records;
console.log("People loaded");
});
}.bind(this)
,1000000 * 10);
};
// stops the interval
$scope.stop = function() {
$interval.cancel(promise);
};
// starting the interval by default
$scope.start();
$scope.$on('$destroy', function() {
$scope.stop();
});
}
angular
.module('inspinia')
.controller('ClientCtrl',ClientCtrl)
plnkr http://plnkr.co/edit/yzN787uL6C82Z6g6JNOq
First off, no need to use ng-click="client = {{$index}}", you're already saying that the code should be parsed by angular so no need for the angular brackets {{ }}.
Second, you need to scope client inside ng-click="client = $index" for example as such ng-click="clients.client = $index", otherwise angular doesn't know where to look for the property.
I also wonder what the need for the ng-init is? I'm guessing this is just mock functionality, because now it will just set the clients.client variable for each item until it ends up being the last one in the list.
In any case, here's a version of your code with fixed syntax, you should be able to take it from here
http://plnkr.co/edit/UyKYvxpErcehizSBKaqy?p=preview
<div ng-controller="ClientCtrl as clients">
<table class="listview">
<tbody>
<tr ng-repeat="stuff in clients.records">
<td>
<a ng-click="clients.client = $index" class="client-link">{{stuff.first_name}} {{stuff.last_name}}</a>
</td>
</tr>
</tbody>
</table>
<div class="detailview">
<div ng-repeat="things in clients.records ">
<div id="contact-{{$index}}" class="tab-pane active" ng-show="clients.client == $index" ng-init="clients.client = $index">
<h2>{{things.first_name}} {{things.last_name}}</h2>
</div>
</div>
</div>
</div>
I have a ng-repeat like this :
<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})"
ng-repeat="student in filteredStudents = (students | filter:model.txtSearch)" >
<img src="./img/man.png">
<h2>{{student.pi_name}}</h2>
<p>{{student.pi_hp}}</p>
</a>
the question is how can I access the filteredStudents variable? as I can't access it by using $scope.filteredStudents; in the controller
When you are applying the filter in view the filtered value is not accessible in controller.
If you need the filtered data in your controller you need to do filtering in your controller like:
$scope.filteredData = $filter('filter')($scope.filteredStudents, $scope.model.txtSearch)
Inject filter in your controller
function YourController($scope, $filter)
{
}
then, use the filter in controller itself
$scope.filteredStudents = $filter('yourFilterName')(model.txtSearch);
then in html,
<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})" ng-repeat="student in filteredStudents" >...</a>
Check this SO question
Controllers execute before the view is rendered, which is why the controller function $scope is empty when it executes. You could access the $scope.filteredStudents from within an event handler, such as ngClick:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
$scope.test = function() {
alert ($scope.items);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="name" /> {{name}}
<div ng-repeat="i in items = ([1,2,3,4] | filter:name )">
{{i}}
</div>
<button ng-click="test()">Hey</button>
</div>
Alternatively, you can access $scope.filteredStudents by using $timeout:
app.controller('ctrl', function($scope,$timeout) {
$timeout(function() {
// $scope.filteredStudents is accessible here...
alert($scope.filteredStudents);
});
});
This works because the $timeout hander executes after the view is rendered. The javascript enclosure allows the $timeout handler to execute, and still access the controller's function context.