I am new to angularjs and unable to figure out why ng-click on a button is not working. I am pasting code below. I am using a django server to render the page.
HTML CODE:
<body ng-controller="myController">
<div class="container-fluid" >
<table class="col-xs-12-ls-12 mfPortfolioTable" width="100%">
<tbody>
<tr ng-repeat="x in records">
<td class="search_table_cell col-xs-1-ls-1">{% verbatim %}{{ x.units | number:3 }}{% endverbatim %}</td>
</tr>
<tr>
<td><button class="btn btn-primary" ng-click="updateMfPortfolio()" id="updateFolio">Update</button></td>
</tr>
</tbody>
</table>
</div>
</body>
CONTROLLER CODE:
var app = angular.module('searchApp', []);
app.controller('myController', function($scope, $http) {
$http.get('/somelink/').then(function(response){
$scope.records = response.data.data;
});
//This is the function which I expect to get triggered by ng-click
$scope.updateMfPortfolio = function(){
console.log('Updating MF Portfolio...');
$http.get('/somelink/').then(function(response){
console.log('Code reached here...');
$scope.records = response.data.data;
});
};
Related
I am using ng-repeat to loop though elements which could be numeric or object. I am trying to use condition to display number or another sub ng-repeat. Following an example of code
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="angular.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
I am very new to angular. Please help.
Try like the below code, also please check this plunker for working example.
Controller:
$scope.isNumber = angular.isNumber;
Template:
<span ng-if="isNumber(value)">Valid Number</span>
Bind the angular.isNumber function to a function in your controller.
var app = angular.module("App", []);
app.controller("vmCtrl", function () {
var vm = this;
vm.isNumber = angular.isNumber;
vm.data = {
"thing1": [1,2,3,4],
"thing2": [{
"something1a": "something1b",
"something2a": "something2b"
},
{
"somethingElse1a": "somethingElse1b",
"somethingElse2a": "somethingElse2b"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table ng-app="App" ng-controller="vmCtrl as vm">
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="vm.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
</table>
I want to show data in a table using angularjs in codeigniter.
Controller:
public function source_list_for_test(){
$data['get_source'] = $this-> admin_model-> get_all_source_list_for_test();
echo json_encode($data['get_source']);
}
Model:
function get_all_source_list_for_test() {
$this->db->select('*');
$this->db->from('source');
$query = $this->db->get();
return $query->result_array();
}
View:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div class="table-responsive" ng-app="myapp" ng-controller="tabletest">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{index + 1}}</td>
<td>{{data.name}}</td>
<td><a class="btn btn-info btn-sm btn-fill" href="">
<i class="fa fa-pencil-square-o"></i> Edit</a>
<a class="btn btn-danger btn-sm btn-edit btn-fill delete" id="" ><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="<?php echo base_url()?>app/js_code.js></script>
Js file is
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('tabletest', function($scope, $http) {
$http.get(baseUrl + "admin/source_list_for_test")
.then(function(response) {
$scope.datas = response.data;
});
});
</script>
I tried this but data not fetched and not bind in my view page.this shows below screen shoot.
enter image description here
did you check for app.js file, may be app.js not downloaded.
I have a form as given below:
<form name="my-test-suite" ng-submit=submit() ng-controller="createTestSuite">
<div ng-controller="showTests">
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Select Test</th>
<th>Test ID#</th>
<th>Description</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in testcases">
<td>
<input ng-model='ctrl.test.selected' type="checkbox" value="">
</td>
<td ng-model='test.id' >{{ test.id }}</td>
<td ng-model='test.resourceId'>{{ test.resourceId }}</td>
<td ng-model='test.allGraphs'>{{ test.allGraphs }}</td>
</tr>
</tbody>
</table>
</div>
<div align=center>
<button class="btn btn-default" type="submit">Submit</button>
</div>
</div>
</form>
and controllers as:
var app = angular.module('myApp', []);
app.controller('showTests', function($scope, $http) {
$http.get("http://localhost:4567/config-manager/tests").then(
function(response) {
$scope.testcases = response.data;
});
});
app.controller('createTestSuite', ['$scope', function($scope, $http) {
$scope.submit = function() {
console.log($scope.test);
};
}]);
It shows the grid properly with showTests but when I want to see the table data using createTestSuite Controller I cant see $scope at all. This is the problem. I want to read entire table data and use with post request. Please help.
One got below json for get request:
[ {
"id" : 55,
"allGraphs" : null,
"resourceId" : "126"
}, {
"id" : 56,
"allGraphs" : null,
"resourceId" : "125"
}, {
"id" : 58,
"allGraphs" : null,
"resourceId" : "140"
} ]
You're using ng-repeat="test in testcases" but you're never defining $scope.test so you're not able to access it.
A quick way to pass your table data from the showTests to the createTestSuite controller through ng-click="submit(testcases).
Following changes would be needed:
Update the view:
<form name="my-test-suite" ng-controller="createTestSuite">
// Other things stay the same
<button class="btn btn-default" ng-click="submit(testcases)" type="submit">Submit</button>
</form>
Update controller:
app.controller('createTestSuite', ['$scope', function($scope, $http) {
$scope.submit = function(data) {
console.log(data);
// Filter through the selected items if needed
};
}]);
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
I have the following code that makes a PUT request and displays the
modified data returned from the server in a table. Right now, when
the page is loaded, an empty table is displayed until the button is clicked.
What I require is that the table be hidden until the button is clicked. How
do I accomplish this?
<div ng-app="myApp" ng-controller="formController">
<script type="text/ng-template" id="tableTemplate.html">
<table>
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.id }}</td>
<td>{{ x.email }}</td>
<tr>
</tbody>
</table>
</script>
<form ng-submit="processForm()">id :
<input type="text" name="id" ng-model="formData.id">email :
<input type="email" name="email" ng-model="formData.email">
<input type="submit" value="go">
</form>
<div my-directive></div>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective', function() {
return {
replace: true,
restrict: 'EA',
templateUrl: 'tableTemplate.html'
}
});
app.controller("formController", function($scope,$http) {
$scope.formData = {};
$scope.processForm = function(){
// PUT /users/id
var url = 'http://www.example.com/users/' + $scope.formData.id;
var data = '{"email":"' + $scope.formData.email}';
$http({method: 'PUT', url: url, data: data}).success(function(response){
$scope.names = response;
});
}
});
</script>
In the HTML:
<table ng-show="formSubmitted">
In the controller $http success() function:
$scope.formSubmitted = true;