ng-model based on various scenarios

Question

ng-model based on various scenarios

I have two distinct arrays defined as :

var oldarr = ['one','two','three'];

var newarr = ['four','five','six'];

var condi = 1 / 0;

I am using the array values as ng-model options in a select dropdown. However, I want to dynamically switch between the arrays based on the value of the 'condi' variable. If 'condi' is 1, I will use ng-model = oldarr and if 'condi' is 2, I will use ng-model = newarr.

Below is my dropdown menu. Can someone please suggest how I can achieve this?

<select ng-model="oldarr " ng-selected="{{defaultvalue == selectedslastatus}}">
  <option ng-repeat="vals in oldarr ">{{vals }}</option>
</select>

javascript arrays angularjs

Answer 1

Answer №1

One effective strategy is to incorporate a middle array into your code.

(While it is possible to achieve this using ng-show, ng-if, or ng-switch, opting for a neat HTML Template (View) and maintaining uniform array structures may lead you to shift the logic to the Controller)

For instance:

<select ng-model="modelArr" ng-selected="{{defaultvalue == selectedslastatus}}">
  <option ng-repeat="vals in modelArr ">{{vals }}</option>
</select>

Then, handle the decision regarding which array to use in your controller.

Your controller could be structured as follows:

// 
$scope.$watch('condi', function (){
    if (condi === true)
        $scope.modelArr = newArr;
    else
        $scope.modelArr = oldArr;
})

Answer 2

One effective strategy is to incorporate a middle array into your code.

(While it is possible to achieve this using ng-show, ng-if, or ng-switch, opting for a neat HTML Template (View) and maintaining uniform array structures may lead you to shift the logic to the Controller)

For instance:

<select ng-model="modelArr" ng-selected="{{defaultvalue == selectedslastatus}}">
  <option ng-repeat="vals in modelArr ">{{vals }}</option>
</select>

Then, handle the decision regarding which array to use in your controller.

Your controller could be structured as follows:

// 
$scope.$watch('condi', function (){
    if (condi === true)
        $scope.modelArr = newArr;
    else
        $scope.modelArr = oldArr;
})

Answer 3

Answer №2

If we want to switch the views based on a condition that is not strictly a boolean value, like the example with condi, we can use ng-switch in AngularJS. Here's a sample implementation:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.condi = 1;
  $scope.oldarr = ['one', 'two', 'three'];
  $scope.newarr = ['four', 'five', 'six'];

  $scope.changeCondi = function() {
    $scope.condi = ($scope.condi == 1) ? 0 : 1;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <button ng-click="changeCondi()">Change condi</button> : {{condi}}
  <div ng-switch="condi">
    <div ng-switch-when="1">
      <select ng-model="oldar">
        <option ng-repeat="vals in oldarr">{{vals}}</option>
      </select>
      Selected: {{oldar}}
    </div>

    <div ng-switch-when="0">
      <select ng-model="newar">
        <option ng-repeat="vals in newarr">{{vals}}</option>
      </select>
      Selected: {{newar}}
    </div>
  </div>

</div>

Answer 4

If we want to switch the views based on a condition that is not strictly a boolean value, like the example with condi, we can use ng-switch in AngularJS. Here's a sample implementation:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.condi = 1;
  $scope.oldarr = ['one', 'two', 'three'];
  $scope.newarr = ['four', 'five', 'six'];

  $scope.changeCondi = function() {
    $scope.condi = ($scope.condi == 1) ? 0 : 1;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <button ng-click="changeCondi()">Change condi</button> : {{condi}}
  <div ng-switch="condi">
    <div ng-switch-when="1">
      <select ng-model="oldar">
        <option ng-repeat="vals in oldarr">{{vals}}</option>
      </select>
      Selected: {{oldar}}
    </div>

    <div ng-switch-when="0">
      <select ng-model="newar">
        <option ng-repeat="vals in newarr">{{vals}}</option>
      </select>
      Selected: {{newar}}
    </div>
  </div>

</div>

ng-model based on various scenarios

Answer №1

Answer №2

Similar questions

Showing the Length of Several Videos Simultaneously on a Webpage

The callback function is triggered prior to the completion of the request.on function

Achieving a consistent scroll value using RxJs

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Customizing Axios actions in Vue JS using a variable

Contrasting a string against an array

``In Internet Explorer, the function to swap the image source when hovering over the parent element

Using AngularJS to send a large JSON file to a directive

I'm encountering some issues trying to install next-auth in my project built with Next.js and React

Developing a website using custom modules in Node.js and Express framework

Error: Unable to access property 'camera' as it is undefined

This particular JavaScript function is only designed to operate on the initial input box in the provided

Linking two dropdowns in Ember with data binding

Utilize React hooks to efficiently filter multiple JSON requests

Guide to using jQuery to input a multi-line text into a field

Leveraging Google maps to find nearby stores

PHP AJAX Request Failing to Transfer Files

What is the best way to ensure that two objects collide with one another?

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

What methods can be used to incorporate animation when the display attribute transitions to none?