Question

我创建了一个表格，显示单位，金额，checkbox1forunits，checkbox2foramounts，输入。该表有四个记录。单位和金额的值来自json数组。

我想根据所选复选框设置输入框的最大值。对于每个输入框，有不同的最大值。如果选中checkbox1forunits，则将输入框的最大值设置为相应的给定单位。如果选中checkbox2foramounts，则将输入框的最大值设置为相应的给定量。

我应该写什么条件来实现这个目标？我理解逻辑但很难用角度js写它。

var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",

  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: false
  }
});

swiper.on("slideChange", function() {
  console.log(" Prev slide was: " + swiper.previousIndex);
  var prevSlide = swiper.previousIndex;
  //Setting up index as per id's of iframe
  prevSlide = prevSlide + 1;
  var targetFrame = $("iframe[id='reload" + prevSlide + "']");
  $(targetFrame).attr("src", $(targetFrame).attr("src"));
});

Answer 1

假设，对于单行，任何一个复选框都将处于活动状态？ checkbox1forunits或checkbox2foramounts。

使用ng-change中的checkbox和max属性

中的tenerary运算符可以实现这一点

请找到以下工作示例：

＆＃13;

<html>

<head>
  <title></title>
</head>

<body>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function($scope) {
      $scope.IsVisible = false;
      $scope.GenerateTable = function() {
        $scope.Customers = [{
          unit: 100,
          amount: 1000
        }, {
          unit: 200,
          amount: 2000
        }, {
          unit: 300,
          amount: 3000
        }, {
          unit: 400,
          amount: 4000
        }];

        $scope.IsVisible = true;
      };
    });

    app.directive("limitToMax", function() {
      return {
        link: function(scope, element, attributes) {
          element.on("keydown keyup", function(e) {

            if (Number(element.val()) > Number(attributes.max) &&
              e.keyCode != 46 // delete
              &&
              e.keyCode != 8 // backspace
            ) {
              scope.val = true;
              e.preventDefault();
              element.val(attributes.max);
            }
          });
        }
      };
    });
  </script>
  <div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Generate Table" ng-click="GenerateTable()" />
    <hr />
    <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
      <tr>
        <th>Unit</th>
        <th>Amount</th>
        <th>Checkbox1</th>
        <th>Checkbox2</th>
      </tr>
      <tbody ng-repeat="m in Customers">
        <tr>
          <td>{{m.unit}}</td>
          <td>{{m.amount}}</td>
          <td>
            <input type="checkbox" ng-init="checkbox1[$m] = true" ng-model="checkbox1[$m]" ng-change="checkbox2[$m] = !checkbox1[$m]"/> </td>
          <td>
            <input type="checkbox" ng-model="checkbox2[$m]" ng-change="checkbox1[$m] = !checkbox2[$m]"/> </td>
          <td>
            <input type="number" ng-model="myVar[$m]" min="1" max="{{checkbox1[$m]?m.unit:m.amount}}" limit-to-max />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

＆＃13;

根据角度js中选中的复选框设置输入框的最大值

1 个答案: