set model value using array in angular js

Question

I'm using AngularJS framework.

I have a text box to enter an amount and a drop down to select a type.

<input type="text" ng-model="user.amount"/>
<select ng-model="user.rateType"> 
  <option> rate </option>
  <option> unrate</option>
</select>
<input type="text" ng-model="user.assignVal"/>

Here is my controller

var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
  $scope.Main = [
    { id: "1", hval: 1000, lval: 5000, type: "rate", cal: "20" },
    { id: "2", hval: 6000, lval: 10000, type: "rate", cal: "50" },
    { id: "3", hval: 1000, lval: 5000, type: "unrate", cal: "100" },
    { id: "4", hval: 6000, lval: 10000, type: "unrate", cal: "100" },
  ];
  console.log($scope.user.assignVal);
});

The user enter an amount in the text-box and select the rate type. I need to find the element fulfilling the following conditions :

the user selected type matches item type
the amount entered by the user is in the range delimited by hval andlval

For example,

User enters 1100 as amount and select rate type, cal equals 20
User enters 6500 as amount and select rate type, cal equals 50
User enters 1100 as amount and select unrate type, cal equals 100

How can I achieve this ?

get request

$scope.loadShareSetting = function (){
    $http({
        method: "GET",
        headers: { 'Content-Type': 'application/json','Authorization': 'Bearer ' + localStorage.getItem('JWT_TOKEN')},
        url: appConfig.apiUrl + "/residence-settings",
    }).then(function (response) {  
     $scope.residenceSetting = response.data;
    }, function (response) {

    });

}

this get request response is very similar to your array. how i assign it — kumara
– kumara, Commented Apr 1, 2020 at 3:53

Stephane Janicaud · Accepted Answer · 2020-04-01 07:26:37Z

1

Here is a sample code to achieve this

angular.module("myApp", []);
angular
  .module("myApp")
  .controller("myController", [
    "$scope",
    "myService",
    function ($scope, myService) {
      $scope.getCalForAmount = function () {
        var result = myService.getCalForAmount($scope.amount, $scope.type);
        if (result !== -1) {
          $scope.calForAmount = result.cal;
        } else {
          $scope.calForAmount = ""; // no matching cal, empty field
        }
      };
    },
  ])
  .service("myService", function () {
    var items = [
      { id: "1", hval: 1000, lval: 5000, type: "rate", cal: "20" },
      { id: "2", hval: 6000, lval: 10000, type: "rate", cal: "50" },
      { id: "3", hval: 1000, lval: 5000, type: "unrate", cal: "100" },
      { id: "4", hval: 6000, lval: 10000, type: "unrate", cal: "100" },
    ];
    return {
      getCalForAmount: function (amount, type) {
        var result = items.find(function (item) {
          return (
            /^[0-9]*$/.test(amount) && // amount must be an number
            type === item.type && // type must match
            amount >= item.hval && // amount is in the range delimited by hval
            amount <= item.lval // and lval
          );
        });
        return result || -1;
      },
    };
  });

label {
  display: block;
  padding: 5px;
}

label span {
  display: inline-block;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="myApp">
  <body>
    <div ng-controller="myController">
      <label>
        <span>Amount</span>
        <input type="text" ng-model="amount" ng-change="getCalForAmount()" />
      </label>
      <label>
        <span>Type</span>
        <select ng-model="type" ng-change="getCalForAmount()">
          <option>rate</option>
          <option>unrate</option>
        </select>
      </label>
      <label>
        <span>Cal for amount and type</span>
        <input type="text" ng-model="calForAmount" readonly />
      </label>
    </div>
  </body>
</html>

Edit

Checkout this demo on Plunker to understand how to load items using http request

edited Apr 1, 2020 at 7:26

answered Mar 31, 2020 at 15:17

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kumara Over a year ago

Thanks lot Stephane. I will try this to my actual code. seems to be ok :)

kumara Over a year ago

what happen from below code, return result || -1; ?

kumara Over a year ago

Dear friend my actual data comes from get request. ' var items' array should replace from the get request data. how i do it. i added get request to the question. pls check

Stephane Janicaud Over a year ago

result is returned as a negative number when no item matches the val range and type combination. In this case we do nothing

Stephane Janicaud Over a year ago

I added another demo on Plunker to understand how to load items using http request.

Collectives™ on Stack Overflow

set model value using array in angular js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related