Question

我正在尝试从输入[范围]创建一个长度为ng-model（ numberFloor ）的动态数组（ arr ）。

var app = angular.module("houseBuilder", ['ngSanitize']);

app.controller('myCtrl', function($scope) {
    $scope.numberFloor = 1;
    $scope.floor = '<div class="home-floor"><div class="home-floor-window"></div><div class="home-floor-window"></div></div>';
    $scope.arr = [$scope.numberFloor]; // How to bind a dynamically array with length equal numberFloor?
});

.home {
  display: inline-block;
  width: 300px;
}

.home-roof {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 100px solid black;
  position: relative;
}

.home-roof:after {
  content:'';
  position:absolute;
  top: 4px;
  left: -137px;
  width: 0;
  height: 0;
  border-left: 137px solid transparent;
  border-right: 137px solid transparent;
  border-bottom: 92px solid white;
}

.home-floor {
  height: 100px;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.home-floor-window {
  display: inline-block;
  box-sizing: border-box;
  width: 50px;
  height: 70px;
  border: 3px solid blue;
  margin: 15px 40px;
}

.home-groundfloor {
  height: 100px;
  border-right: 5px solid black;
  border-left: 5px solid black;
  border-bottom: 5px solid black;
}

.home-groundfloor-door {
  float: right;
  box-sizing: border-box;
  width: 60px;
  height: 90px; 
  border: 3px solid red;
  margin: 10px 30px 0 0;
}

.controller {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>House builder</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0-rc.0/angular-sanitize.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-app="houseBuilder" ng-controller="myCtrl">
  <div class="home">
    <div class="home-roof"></div>
    <div ng-repeat="n in arr" ng-bind-html="floor"></div>
    <div class="home-groundfloor">
      <div class="home-groundfloor-door"></div>
    </div>
  </div>
  <div class="controller">
    <input type="range" min="1" max="10" ng-model="numberFloor">
    <input type="text" value="{{numberFloor}}">
  </div>
</body>
</html>

最简单的方法是将ng-model的值绑定到数组的长度，以便在ng-model更改时长度发生变化？

Answer 1

最简单的方法就是让你array.length属性如此：

  <input type="range" min="0" max="100" ng-model="array.length">

这是一个有效的例子：

angular.module('test', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form ng-app="test" ng-init="array = []">
  <input type="range" min="0" max="100" ng-model="array.length">
  
  <p>{{array|json}}</p>
</form>

如何将输入[range]的值绑定到数组？

1 个答案: