"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

The issue of calling the child window function from the parent window upon clicking does not seem to be functioning properly on Safari and Chrome

Is it possible to store data from a form directly into a MongoDB database?

Divide a JavaScript project into multiple packages using either webpack or npm

Implementing dynamic class bindings with Vue.js using v-for

Implementing Ajax calls to dynamically update Datatable results

Retrieve the image and insert it using an img tag

Eradicate white space in a JavaScript code

I'm experiencing an issue with fullCalendar where the dayRender function is not functioning as expected

Implementing the firebase-admin SDK module into an AngularJS project

Arrange an asynchronous function in Node.js

Launching a web application directly from a USB drive

Alter text within a string situated between two distinct characters

What is the best way to connect or link to a HTML table row <tr>

Fixing the "Package Manager Not Found" Issue when Deploying a Next.js Project on Vercel

Error encountered when trying to load Ajax script

Node.js encountering difficulty extracting JSON data

The TypeScript Promise error codes TS2304 and TS2529 are causing confusion among

Transforming the MUI CircularProgress into a half circle shape

Retrieve the value of a field from a Formik form integrated with Material UI

Struggling to store information in a MongoDB database within my MEAN Stack project