An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

Question

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

I have been tasked with binding a value to one model based on the content of another model when it contains a string that starts with "https".

For instance, there are two text fields each associated with a different model.

<input type="text" ng-model="modelText1">
<input type="text" ng-model="modelText2">

If I enter a value starting with "https" in the first text field, the value in modelText1 should be bound to modelText2 and maintained as bidirectional binding. This means that the second field will automatically receive the value dynamically if it starts with "https".

javascript angularjs angular-ngmodel

Answer 1

Answer №1

Check out this Demo example.

Preview

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS Application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';

    var regEx = new RegExp(/^https/);

    $scope.$watch('modelText1', function (newValue) {
       if (newValue.toLowerCase().match(regEx)) {
          $scope.modelText2 = newValue;
       } else {
          $scope.modelText2 = '';
       }
    });
});

Another method (without using $watch) is to utilize AngularJS ng-change as demonstrated in this

sample fiddle.

Preview

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" ng-change="change()"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS Application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';
    var regEx = new RegExp(/^https/);

    $scope.change = function () {
       if ($scope.modelText1.toLowerCase().match(regEx)) {
          $scope.modelText2 = $scope.modelText1;
       } else {
          $scope.modelText2 = '';
       }
    };
});

Answer 2

Check out this Demo example.

Preview

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS Application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';

    var regEx = new RegExp(/^https/);

    $scope.$watch('modelText1', function (newValue) {
       if (newValue.toLowerCase().match(regEx)) {
          $scope.modelText2 = newValue;
       } else {
          $scope.modelText2 = '';
       }
    });
});

Another method (without using $watch) is to utilize AngularJS ng-change as demonstrated in this

sample fiddle.

Preview

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" ng-change="change()"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS Application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';
    var regEx = new RegExp(/^https/);

    $scope.change = function () {
       if ($scope.modelText1.toLowerCase().match(regEx)) {
          $scope.modelText2 = $scope.modelText1;
       } else {
          $scope.modelText2 = '';
       }
    };
});

Answer 3

Answer №2

To implement the functionality described above, utilize the ng-change directive in the following manner:

<input type="text" ng-model="textInput1" ng-change="updateText()"> 
<input type="text" ng-model="textInput2">

Here is an example of how to handle this in your controller:

$scope.updateText = function() {
   if ($scope.textInput1 === 'https') {
     $scope.textInput2 = $scope.textInput1;
   else
     $scope.textInput2 = '';
};

Answer 4

To implement the functionality described above, utilize the ng-change directive in the following manner:

<input type="text" ng-model="textInput1" ng-change="updateText()"> 
<input type="text" ng-model="textInput2">

Here is an example of how to handle this in your controller:

$scope.updateText = function() {
   if ($scope.textInput1 === 'https') {
     $scope.textInput2 = $scope.textInput1;
   else
     $scope.textInput2 = '';
};

Answer 5

Answer №3

Implement the ng-change directive to validate if the input text equals 'https'

angular.module('app',[])
.controller('ctrl',function($scope){
  $scope.changeItem = function(item){
   
  $scope.modelText2 = "";
    if(item.toLowerCase() === "https"){
      $scope.modelText2 = item
    }
    
  }
})

<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="modelText1" ng-change="changeItem(modelText1)"> 
  <input type="text" ng-model="modelText2"> 
</div>

UPDATED

To prevent failure when checking for 'HTTPS', utilize the toLowerCase method to convert all characters to lowercase

Answer 6

Implement the ng-change directive to validate if the input text equals 'https'

angular.module('app',[])
.controller('ctrl',function($scope){
  $scope.changeItem = function(item){
   
  $scope.modelText2 = "";
    if(item.toLowerCase() === "https"){
      $scope.modelText2 = item
    }
    
  }
})

<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="modelText1" ng-change="changeItem(modelText1)"> 
  <input type="text" ng-model="modelText2"> 
</div>

UPDATED

To prevent failure when checking for 'HTTPS', utilize the toLowerCase method to convert all characters to lowercase

Answer 7

Answer №4

HTML Example:

<input type="text" ng-model="exampleModel" ng-change="updateModal(exampleModel)">

JS Sample:

var exampleModel = $scope.exampleModel.toUpperCase();

    $scope.updateModal = function(){
        $scope.newModel = '';
        if(exampleModel.includes('https')!=-1){
              $scope.newModel = exampleModel;
        }
    }

Answer 8

HTML Example:

<input type="text" ng-model="exampleModel" ng-change="updateModal(exampleModel)">

JS Sample:

var exampleModel = $scope.exampleModel.toUpperCase();

    $scope.updateModal = function(){
        $scope.newModel = '';
        if(exampleModel.includes('https')!=-1){
              $scope.newModel = exampleModel;
        }
    }

Answer 9

Answer №5

If you are looking for a more reusable solution across multiple views, another approach could be creating a directive. This can help in keeping the controller clean and focused on controlling complex business logic and data. Check out this example on jsFiddle: http://jsfiddle.net/j5ga8vhk/7/

View

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" > 
  <input type="text" ng-model="modelText2" model-listener="modelText1" model-listener-value="https" > 
</div>

Angular JS

var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope) {
        $scope.modelText1 = '';
        $scope.modelText2 = '';

        });


myApp.directive('modelListener', [function()    {

    return {

        restrict: 'A',

        controller: ['$scope',  function($scope) {

        }],
        link: function($scope, iElement, iAttrs, ctrl) {

            $scope.$watch(iAttrs.modelListener, function() {

                if($scope[iAttrs.modelListener] === iAttrs.modelListenerValue ) {
                   $scope[iAttrs.ngModel] = $scope[iAttrs.modelListener];
                } else {
                    $scope[iAttrs.ngModel] = "";
                }
            }, true);

        }
    };

}]);

Answer 10

If you are looking for a more reusable solution across multiple views, another approach could be creating a directive. This can help in keeping the controller clean and focused on controlling complex business logic and data. Check out this example on jsFiddle: http://jsfiddle.net/j5ga8vhk/7/

View

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" > 
  <input type="text" ng-model="modelText2" model-listener="modelText1" model-listener-value="https" > 
</div>

Angular JS

var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope) {
        $scope.modelText1 = '';
        $scope.modelText2 = '';

        });


myApp.directive('modelListener', [function()    {

    return {

        restrict: 'A',

        controller: ['$scope',  function($scope) {

        }],
        link: function($scope, iElement, iAttrs, ctrl) {

            $scope.$watch(iAttrs.modelListener, function() {

                if($scope[iAttrs.modelListener] === iAttrs.modelListenerValue ) {
                   $scope[iAttrs.ngModel] = $scope[iAttrs.modelListener];
                } else {
                    $scope[iAttrs.ngModel] = "";
                }
            }, true);

        }
    };

}]);

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

Answer №1

Preview

AngularJS Application

Preview

AngularJS Application

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can the md-sidenav be automatically opened when a specific ui-router state is loaded, without being locked in the open

Best practices for updating nested properties in Angular objects

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

React-redux: Data of the user is not being stored in redux post-login

Troubleshooting Karate - jbang.execute() (Node npm)

The UseEffect function is displaying an inappropriate value, however, it only occurs once

Recognizing a component through various page loads

Tips for maintaining the original ng-click initialized value as the ng-init value after the page is refreshed

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

Is Jquery "resistant" to updating CSS properties?

Invalid PDF File - Unable to Complete Download via $http

When using React.js with Leaflet, ensure that the useEffect hook is only run on Mount when in the

How to Retrieve Post Data for Each Field in AngularJS

Activate the Jquery-ui Tooltip with a click event

The Jquery click event refuses to trigger

What is the process for implementing ng-required in a MultiSelect component?

What is preventing the text of the elements from being updated?

The dot notation in JSON syntax allows for easy access

Issue with Angular UI tooltip not closing correctly inside ng-repeat loop

Initiate a click event on an anchor element with the reference of "a href"