AngularJS: incorporating various functionalities within a single controller

Question

AngularJS: incorporating various functionalities within a single controller

I have a basic AngularJS controller that I am working on, and I would like it to include two separate functions:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http, $log) {
    //Function 1
    $scope.search = function() {
        $http.post('server.php', { "data" : $scope.keywords})
        .success(function(data, status) {
            $scope.result = data;
        })
    };

    //Function 2
    $scope.tableClick = function() {
          $log.log('Hello World!');
    };

})

I seem to be encountering a syntax issue because the script only works when I remove the second function.

When I try running the script with both functions included (as shown above), I am seeing {{ x }} for the content of the following HTML elements:

<tr ng-repeat="x in result">
<td><a href="www.test.com" >{{ x }}</a></td>

Any ideas on what could be causing this?

javascript angularjs

Answer 1

Answer №1

As mentioned previously, there is no equivalent to echo 'Hello World!' in JavaScript. To display the phrase on the DOM, you must use it as a simple expression like this:

$scope.helloWorld = 'Hello World!';

Then, in the HTML, you can call it with {{helloWorld}}. It seems like you are trying to test it with a function. In that case, make sure to return the string 'Hello World!' as shown below:

$scope.helloWorld = function () {
    return 'Hello World';
};

In the HTML:

{{ helloWorld() }}

If you simply want to "log" the Hello World! to the console (assuming you are not overlooking JS errors): AVOID USING console.log();. Instead, utilize AngularJS' built-in service $log.

A more improved code

However, if I were in your shoes, I would approach the code differently. Here's an example:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function ($scope, $http, $log) {
    //1st function
    $scope.search = function () {
        $http.post('server.php', { "data" : $scope.keywords })
        .then(function (resp) { //use then instead of success/error
            return resp.data;
        }, function inCaseOfErrors (err) { //named just for teaching purposes
            $log.log(err);
        });
    };

    //2nd function
    $scope.tableClick = function () {
        $log.log('Hello World!');
    };
})

Answer 2

As mentioned previously, there is no equivalent to echo 'Hello World!' in JavaScript. To display the phrase on the DOM, you must use it as a simple expression like this:

$scope.helloWorld = 'Hello World!';

Then, in the HTML, you can call it with {{helloWorld}}. It seems like you are trying to test it with a function. In that case, make sure to return the string 'Hello World!' as shown below:

$scope.helloWorld = function () {
    return 'Hello World';
};

In the HTML:

{{ helloWorld() }}

If you simply want to "log" the Hello World! to the console (assuming you are not overlooking JS errors): AVOID USING console.log();. Instead, utilize AngularJS' built-in service $log.

A more improved code

However, if I were in your shoes, I would approach the code differently. Here's an example:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function ($scope, $http, $log) {
    //1st function
    $scope.search = function () {
        $http.post('server.php', { "data" : $scope.keywords })
        .then(function (resp) { //use then instead of success/error
            return resp.data;
        }, function inCaseOfErrors (err) { //named just for teaching purposes
            $log.log(err);
        });
    };

    //2nd function
    $scope.tableClick = function () {
        $log.log('Hello World!');
    };
})

Answer 3

Answer №2

Ensure that the values in your $scope.result are correct. Keep in mind that there is no echo function in JavaScript.

In the code snippet below, I have removed the server call and used hardcoded data for testing purposes:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http) {
    $scope.result = ["apple", "orange", "raisin", "banana"];
    
    $scope.search = function() {
        // Simulating server response
    };

    $scope.tableClick = function(item) {
        console.log("Someone clicked on the table! Row: " + item);
    };
})

HTML:

<table>
    <tr ng-repeat="item in result">
       <td data-ng-click="tableClick(item)">{{ item }}</td>
    </tr>
</table>

Answer 4

Ensure that the values in your $scope.result are correct. Keep in mind that there is no echo function in JavaScript.

In the code snippet below, I have removed the server call and used hardcoded data for testing purposes:

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http) {
    $scope.result = ["apple", "orange", "raisin", "banana"];
    
    $scope.search = function() {
        // Simulating server response
    };

    $scope.tableClick = function(item) {
        console.log("Someone clicked on the table! Row: " + item);
    };
})

HTML:

<table>
    <tr ng-repeat="item in result">
       <td data-ng-click="tableClick(item)">{{ item }}</td>
    </tr>
</table>

AngularJS: incorporating various functionalities within a single controller

Answer №1

A more improved code

Answer №2

Similar questions

Leveraging a static value in a service within AngularJS

What is preventing me from extracting the callback function from the app.get method in Node.js and Express?

Rotate Text in HTML <thead> Tag

Validate that a string is a correct file name and path in Angular without using regular expressions

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

Using React.js to add MongoDB documents into the database

Update the image source every few seconds

Choosing Text with JavaScript

When programming with PHP and JavaScript, managing events' start dates and end dates

Retrieve information from individual XML nodes in a parsed string

React - 'classProperties' is not currently activated in this setting

Unit testing Vue 3 by simulating the push() method of vue-router

Adaptive Images with jQuery Mobile Listview

Streamline repetitive scope attributes in AngularJS

Next.js Error: The text displayed on the page differs from the HTML rendered by the server

Attempting to remove the current click event listener and add a new event listener

Is using an underscore in a directive's name allowed in AngularJS?

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Generating prime numbers in Javascript

Is there a benefit to using middlewares instead of the standard built-in functions in Express.js?