установить значение модели, используя массив в angular js - PullRequest
Новая
       0

установить значение модели, используя массив в angular js

0 голосов
/ 31 марта 2020

Я использую AngularJS framework.

У меня есть текстовое поле для ввода суммы и выпадающий список для выбора типа. 

<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"/>

Вот Мой контроллер 

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);
});

Пользователь вводит сумму в текстовое поле и выбирает тип тарифа. Мне нужно найти элемент, удовлетворяющий следующим условиям:

  • выбранный пользователем тип соответствует элементу type
  • сумма, введенная пользователем, находится в диапазоне, ограниченном hval и lval

Например,

  • Пользователь вводит 1100 в качестве суммы и выбирает rate тип, cal равен 20
  • Пользователь вводит 6500 в качестве суммы и выберите rate тип, cal равен 50
  • Пользователь вводит 1100 в качестве суммы и выберите unrate тип, cal равен 100

Как я могу добиться этого?

получить запрос 

$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) {

    });

}

1 Ответ

1 голос
/ 31 марта 2020

Вот пример кода для достижения этого 

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>

Редактировать

Оформить заказ это демо на Plunker, чтобы понять, как загрузить элементы, использующие http запрос

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...