"Learn the process of setting a variable in ng-model within an input field based on a specific condition

Question

"Learn the process of setting a variable in ng-model within an input field based on a specific condition

I need to dynamically assign an ng-model variable based on a condition. For instance:

<input type="text" ng-model="item.model[multilang]" >

The $scope.multilang variable can be set to either "ENG", "JP" (languages) or false. So, when multilang = "ENG" and the user types in "Hello" into the input field, the result will be:

item.model = {ENG: "Hello"}

The issue arises when $scope.multilang is set to false. In such cases, I want the result to simply be:

item.model = "Hello"

I am struggling to figure out how to achieve this scenario. One potential solution that comes to mind is to change the ng-model attribute based on the value of $scope.multilang - so if it's false, the ng-model would become ng-model="item.model". However, I'm not sure how to implement this.

EDITED I have come up with one possible solution:

<input ng-if="multilang" type="text" ng-model="item.model[multilang]" >
<input ng-if="!multilang" type="text" ng-model="item.model" >

Is there a better way to achieve this functionality?

-----plnkr example-----

javascript angularjs

Answer 1

Answer №1

Angular offers a high level of flexibility and power as a framework. Utilizing custom directives along with ngModel's getter/setter option can greatly enhance your development process.

If you choose to use a directive without ngModel's getter/setter, the code may look like this:

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model">

The corresponding directive code would be:

.directive('multilang', [function(){

    return {

      restrict: "A",

      require: "ngModel",

      scope: {
        multilang: "=",
        multilangModel: "="
      },

      link: function(scope, element, attr, ngModel){

        ngModel.$viewChangeListeners.push(function()){

          var value = ngModel.$modelValue;

          if(scope.multilang !== false) {

            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)

            scope.multilangModel[scope.multilang] = value

          }

          else {

             scope.multilangModel = value

          }
        })
      }
    }
 }])

--check out the updated plunkr demo--

If opting for ngModel's getter/setter approach, you could modify the input like so:

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model" 
       ng-model-options="{ getterSetter: true }">

The associated directive code for this scenario:

.directive('multilang', [function(){

    return {

      restrict: "A",

      scope: {
        multilang: "=",
        multilangModel: "=",
        val: "=ngModel"
      },

      link: function(scope, element, attr){

        scope.val = function(newValue) {

          if(scope.multilang !== false) {

            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)                

            return arguments.length ? (scope.multilangModel[scope.multilang] = newValue) : scope.multilangModel[scope.multilang];

          }

          else {

             return arguments.length ? (scope.multilangModel = newValue) : scope.multilangModel;

          }
        }
      }
    }
 }])

--see the enhanced plunkr example here--

In my view, the second method is preferable. It enables two-way binding with item.model, updating the input value when changes are made to item.model elsewhere in the codebase.

Answer 2

Angular offers a high level of flexibility and power as a framework. Utilizing custom directives along with ngModel's getter/setter option can greatly enhance your development process.

If you choose to use a directive without ngModel's getter/setter, the code may look like this:

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model">

The corresponding directive code would be:

.directive('multilang', [function(){

    return {

      restrict: "A",

      require: "ngModel",

      scope: {
        multilang: "=",
        multilangModel: "="
      },

      link: function(scope, element, attr, ngModel){

        ngModel.$viewChangeListeners.push(function()){

          var value = ngModel.$modelValue;

          if(scope.multilang !== false) {

            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)

            scope.multilangModel[scope.multilang] = value

          }

          else {

             scope.multilangModel = value

          }
        })
      }
    }
 }])

--check out the updated plunkr demo--

If opting for ngModel's getter/setter approach, you could modify the input like so:

<input type="text" 
       ng-model="val" 
       multilang="multilang" 
       multilang-model="item.model" 
       ng-model-options="{ getterSetter: true }">

The associated directive code for this scenario:

.directive('multilang', [function(){

    return {

      restrict: "A",

      scope: {
        multilang: "=",
        multilangModel: "=",
        val: "=ngModel"
      },

      link: function(scope, element, attr){

        scope.val = function(newValue) {

          if(scope.multilang !== false) {

            if(typeof scope.multilangModel == 'undefined')
              scope.multilangModel = Object.create(null)                

            return arguments.length ? (scope.multilangModel[scope.multilang] = newValue) : scope.multilangModel[scope.multilang];

          }

          else {

             return arguments.length ? (scope.multilangModel = newValue) : scope.multilangModel;

          }
        }
      }
    }
 }])

--see the enhanced plunkr example here--

In my view, the second method is preferable. It enables two-way binding with item.model, updating the input value when changes are made to item.model elsewhere in the codebase.

Answer 3

Answer №2

Give this a shot:

<input ng-show="multilang" type="text" ng-model="item.model[multilang]" >
<input ng-hide="multilang" type="text" ng-model="item.model" >

Answer 4

Give this a shot:

<input ng-show="multilang" type="text" ng-model="item.model[multilang]" >
<input ng-hide="multilang" type="text" ng-model="item.model" >

"Learn the process of setting a variable in ng-model within an input field based on a specific condition

Answer №1

Answer №2

Similar questions

Using the OR condition in the ternary operator within ReactJS

Create functionality to toggle the visibility of a group of elements within a

Ways to host static content in ExpressJS for specific directories and exclude others

Error: The class constructor [] must be called with the 'new' keyword when creating instances in a Vite project

What is the best method for binding variables in Vue.JS using moustache syntax and passing parameters to them?

Generate unique IDP SAML replies

Is it necessary to always pause before I click?

Error encountered due to a circular reference in the dependency library

Error always appears when using addMethod in jQuery validator

Remove any posts that have a date earlier than the current day

Discover identical JSON elements in 2 JSON arrays using JavaScript and add CSS styles to the corresponding items within a UL list

Server side processes automatically converting boolean parameters in Axios get requests to strings

What is the process for generating an HTTP response that results in a pipe error being thrown

Error: Material UI search bar doesn't refresh interface

What could be causing this JavaScript code to run sluggishly in Internet Explorer despite its simple task of modifying a select list?

Performing a $lookup operation across various collections for a nested output

What is the best way to change a date-containing string into a Json object?

Once the Ajax request is finished, the cookie deletion function ceases to function

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

An array in JSON format containing only one element