AngularJS将变量绑定到与该变量相关的数组

AngularJS binding a variable to an array related to the variable

本文关键字：变量 数组 绑定 AngularJS      更新时间：2023-09-26

我是一名日本学生。所以我的英语不好读。对不起。

我用AngularJS制作了素数列表。用户输入两个值，valFrom和valTo。这个列表是由这两个数字组成的。

我想将输入值绑定到列表中。当我输入输入时，列表会根据值动态地更改。但事实并非如此。当我输入输入时，列表不会改变。我想将值绑定到列表。

以下是我做的。未对值进行排序，因为使用的是Object，而不是Array。

这是index.html。

<!doctype html>
<html lang="ja" ng-app="MYAPP">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js">   </script>
    <script src="script.js"></script>
</head>
<body>
    <div ng-controller="inputCtrl">
        <h1>Make prime number list from {{fromVal}} to {{toVal}}</h2>
        <input type="number" ng-model="fromVal"><br>
        <input type="number" ng-model="toVal"><br>
        <!-- prime numbers list -->
        <div ng-controller="primeListCtrl">
            <div ng-repeat="(val, flag) in primeFlags">
                {{val}}</td><td>{{flag==true? "is prime": "isn't prime"}}
            </div>
        </div>
    </div>
</body>

script.js

angular.module('MYAPP', []).
controller('inputCtrl', function($scope){
    $scope.fromVal = 10;
    $scope.toVal = 50;
}).
controller('primeListCtrl', function($scope){
    /* 
        If primeFlags[i + ""] is true, i is prime number.
        Keys are string, values are boolean. 
    */
    $scope.primeFlags = {};
    // fill with true
    for(var i = 2; i <= $scope.toVal; i++){
        $scope.primeFlags[i+""] = true;
    }
    // set false
    for(var i = 2; i <= $scope.toVal; i++){
        for(var j = 2; j < i; j++){
            if(i%j === 0){
                $scope.primeFlags[i+""] = false;
                break;
            }
        }
    }
});

我认为输入值没有绑定到列表的原因是primeFlags没有更改。当输入值发生更改时，primeFlags不会发生更改。因此，该列表不会更新。

我正在考虑两种解决方案。首先，使用$scope监视输入值$watch（）。其次，使用$broadcast（）和$on（）监视输入值。更改值后，重新生成primeFlags。但是，我认为解决方案并不好。有更好的解决方案吗？

你的素数列表是完全动态的吗？如果是这样的话，你可以在一个函数上创建你的素数列表，然后在你的中继器中使用该函数的结果：

$scope.primeFlags = function(){
      var primeList = {};
      // fill with true
      for(var i = 2; i <= $scope.toVal; i++){
          primeList[i+""] = true;
      }
      // set false
      for(var i = 2; i <= $scope.toVal; i++){
          for(var j = 2; j < i; j++){
              if(i%j === 0){
                  primeList[i+""] = false;
                  break;
              }
          }
      }
      return primeList;
    };

和HTML:

<div ng-repeat="(val, flag) in primeFlags()">

如果你能建立某种边界，我想提前创建素数列表，然后在函数上显示该列表的子集会更有效：

app.controller('primeListCtrl', function($scope){
    /* 
        If primeFlags[i + ""] is true, i is prime number.
        Keys are string, values are boolean. 
    */
    var primeList = [];
    // fill with true
    for(var i = 0; i <= 1000; i++){
        primeList[i] = {id: i, flag: true};
    }
    // set false
    for(var i = 0; i <= 1000; i++){
        for(var j = 2; j < i; j++){
            if(i%j === 0){
                primeList[i].flag = false;
                break;
            }
        }
    }
    $scope.primeFlags = function(){
      return primeList.slice($scope.fromVal, $scope.toVal);
    };
});

和HTML

<div ng-repeat="val in primeFlags()">
                {{val.id}}&mdash;{{val.flag==true? "is prime": "isn't prime"}}
            </div>
相关文章：