ng-binding does not sync with input field

Question

ng-binding does not sync with input field

Check out this JavaScript snippet

angular.module('myApp')
    .controller('HeaderCtrl', function($scope) {
        $scope.searchBooking = "test";

        $scope.goToBooking = function() {
            console.log($scope.searchBooking);
            //$location.path('/bookings/' + $scope.searchBooking);
            //delete($scope.searchBooking);
        }

        $scope.printValue = function() {
            console.log($scope.searchBooking);
        }
    }
);

Here's the corresponding HTML

<div class="input-group custom-search-form">
    <input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>

Upon page load, the text field displays "test," but when the field is altered or the button is clicked, nothing happens (console logs "test" with each change or button press). Any ideas on what may be causing this issue?

javascript angularjs scope

Answer 1

Answer №1

Consider encapsulating the value within an object. Objects are passed by reference, while simple values are passed by copy. I've encountered this issue multiple times as well.

Here is a suggested approach:

$scope.myObject.searchBooking = "test"

With this modification, the complete code will appear as follows:

angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
    $scope.myObject.searchBooking = "test";

    $scope.goToBooking = function() {
        console.log($scope.myObject.searchBooking);
        //$location.path('/bookings/' + $scope.myObject.searchBooking);
        //delete($scope.myObject.searchBooking);
    }

    $scope.printValue = function() {
        console.log($scope.myObject.searchBooking);
    }
}
);

Additionally, here is the corresponding HTML:

<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">

Answer 2

Consider encapsulating the value within an object. Objects are passed by reference, while simple values are passed by copy. I've encountered this issue multiple times as well.

Here is a suggested approach:

$scope.myObject.searchBooking = "test"

With this modification, the complete code will appear as follows:

angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
    $scope.myObject.searchBooking = "test";

    $scope.goToBooking = function() {
        console.log($scope.myObject.searchBooking);
        //$location.path('/bookings/' + $scope.myObject.searchBooking);
        //delete($scope.myObject.searchBooking);
    }

    $scope.printValue = function() {
        console.log($scope.myObject.searchBooking);
    }
}
);

Additionally, here is the corresponding HTML:

<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">

Answer 3

Answer №2

Discover this JSFiddle showcasing ng-model binding in ng-change.

HTML

<div ng-controller="MyCtrl">
 <div class="input-group custom-search-form">
    <input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>
</div>

Angular controller

 var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {

   $scope.searchBooking = "test";

        $scope.goToBooking = function() {
            console.log($scope.searchBooking);
            //$location.path('/bookings/' + $scope.searchBooking);
            //delete($scope.searchBooking);
        }

        $scope.printValue = function() {
            console.log($scope.searchBooking);
        }
}

Answer 4

Discover this JSFiddle showcasing ng-model binding in ng-change.

HTML

<div ng-controller="MyCtrl">
 <div class="input-group custom-search-form">
    <input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <i class="fa fa-search"></i>
        </button>
    </span>
</div>
</div>

Angular controller

 var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {

   $scope.searchBooking = "test";

        $scope.goToBooking = function() {
            console.log($scope.searchBooking);
            //$location.path('/bookings/' + $scope.searchBooking);
            //delete($scope.searchBooking);
        }

        $scope.printValue = function() {
            console.log($scope.searchBooking);
        }
}

ng-binding does not sync with input field

Answer №1

Answer №2

Similar questions

The callback function does not seem to work when using MUI v4 PropFunc

Margins are added to cards on the right side

Monitor user activity for when they click the back button in their browser

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

What is the best way to display items using Typeahead.js in combination with the Bloodhound engine?

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

Why is this basic HTML code not functioning as expected?

Setting up Webpack to compile without reliance on external modules: A step-by-step guide

loading a module's dependencies seamlessly with RequireJS

Utilizing a combination of MVC, jQuery, and Ajax to ensure that JavaScript is fully loaded before proceeding

having difficulty implementing the blur effect in reactJS

Guide to building a straightforward line graph using JSON data from a server

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

Form values not being transmitted correctly in Ajax POST request

How should one properly utilize the app and pages directories in a next.js project?

Trouble with React Native ListView Item Visibility

Steps for including a subdocument within a mongoose schema

Leveraging ng-repeat with nested JSON data, including JSON within JSON

Tips for creating multiple popups using a single line of JavaScript code

Dynamically parallelizing functions with async and arrays