Angularjs 根据下拉列表中选项的选择动态更新 table 的代码

Question

我是 Angularjs 的新手。我在 UI 中有一个 table 和一个按钮（更新）。我在 table 的第 3 列中有一个下拉选项。现在，根据我在下拉列表中 select 的选项，然后我单击 "Update" 按钮， table 第 4 列和第 5 列应更新为对应于 modelId 和公式 selected 的计算值。

我附上了代码。请帮助我使用下拉菜单和 js 函数来更新单击更新按钮时的值。

附上img以便清楚理解。

enter image description here

enter code here


<!DOCTYPE html>
  <html ng-app="myApp">

  <head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="angular.js@1.4.x" 
  src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"> 
    </script>
    <script src="script.js"></script>
    <link 
     href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
     type='text/css' rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     </head>

     <body ng-controller="MainCtrl">
     <div class="row">
    <div class='col-sm-12'>
      <div class="form-group" style="padding-left:15px">
           <div>
            <input type="button" value="Update"  ng-click="update()" 
     class="btn btn-primary" />
          </div>
        </div>
      </div>
       </div>
     <div class="row">
      <div class='col-sm-12'>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Model ID</th>
            <th>MRS</th>
            <th>Formula</th>
            <th>Score1/th>
            <th>Score2</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="model in models" ng-model="model">
            <td>{{model.modelid}}</td>
            <td>{{model.mrs}}</td>
            <td>{{model.formula}}</td>
            <td>{{model.score1}}</td>
            <td>{{model.score2}}</td>
          </tr>
         </tbody>
         </table>
       </div>

      </div>
      </body>
      <script>
     app.controller('MainCtrl', ['$scope','$filter', function ($scope, 
    $filter){

     $scope.models = [
    { id: 1, 'modelid': 'model1', 'mrs': 'high', 'score 1':'2.4' ,'score 
     2':'28.4'},
    { id: 2, 'modelid': 'model2', 'mrs': 'low',  'score 1':'20.6','score 
      2':'45.4'},   
    { id: 3, 'modelid': 'model3', 'mrs': 'medium', 'score 1':'34','score 
       2':'9.4'}
        ];
         $scope.update = function() {

        };
        </script>  
         </html>

Answer 1

您好，js 需要一些整理，这正是您想要的。我是 angularjs 的新手，但这看起来有点像 knockoutjs。在 knockoutjs 中有计算变量，所有内容都在需要时更新。所以你不需要更新按钮。但我是 angularjs 的新手，看起来有点棘手。

至于你的问题，我只是抽取了一些随机值，因为我不知道你的方程是什么wanted.But我希望这能向你展示一些基础知识。

<!DOCTYPE html>
  <html ng-app="myApp">

  <head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="angular.js@1.4.x" 
  src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"> 
    </script>
    <link 
     href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
     type='text/css' rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
     </head>

     <body ng-controller="MainCtrl">
     <div class="row">
    <div class='col-sm-12'>
      <div class="form-group" style="padding-left:15px">
           <div>
            <input type="button" value="Update"  ng-click="update()" 
     class="btn btn-primary" />
          </div>
        </div>
      </div>
       </div>
     <div class="row">
      <div class='col-sm-12'>
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Model ID</th>
            <th>MRS</th>
            <th>Formula</th>
            <th>Score1</th>
            <th>Score2</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="model in models" ng-model="model">
            <td>{{model.modelid}}</td>
            <td>{{model.mrs}}</td>
            <td><select ng-model="model.formula" ng-options="x for x in formulas"></select></td>
            <td>{{model.score1}}</td>
            <td>{{model.score2}}</td>
          </tr>
         </tbody>
         </table>
       </div>

      </div>
      </body>
      <script>
      var app = angular.module('myApp', []);

     app.controller('MainCtrl', ['$scope','$filter', function ($scope, $filter){

        $scope.formulas = ["Forumula 1", "Forumula 2", "Forumula 3"];





        $scope.models = [
            { id: 1, 'modelid': 'model1', 'formula':'', 'mrs': 'high', 'score1':'2.4' ,'score2':'28.4', },
            { id: 2, 'modelid': 'model2', 'formula':'', 'mrs': 'low',  'score1':'20.6','score2':'45.4'},   
            { id: 3, 'modelid': 'model3', 'formula':'', 'mrs': 'medium','score1':'34','score2':'9.4'}
        ];
        $scope.update = function() {

            for(var i = 0;i<$scope.models.length;i++) {

                if($scope.models[i].formula == "Forumula 1") {

                    $scope.models[i].score1 = Math.floor((Math.random() * 100) + 1) * Math.floor((Math.random() * 100) + 1);
                    $scope.models[i].score2 = Math.floor((Math.random() * 100) + 1) * Math.floor((Math.random() * 100) + 1);

                }
                else if($scope.models[i].formula == "Forumula 2") {

                    $scope.models[i].score1 = Math.floor((Math.random() * 100) + 1) 
                    $scope.models[i].score2 = Math.floor((Math.random() * 100) + 1) 

                }
                else if($scope.models[i].formula == "Forumula 3") {

                    $scope.models[i].score1 = Math.floor((Math.random() * 10) + 1) 
                    $scope.models[i].score2 = Math.floor((Math.random() * 10) + 1) 

                }

            }

        }

        }]);
        </script>  
         </html>

Angularjs 根据下拉列表中选项的选择动态更新 table 的代码

Angularjs code for the dynamic update of the table based on the selection of option in the dropdown

javascript

jquery

css

angularjs

html.dropdownlistfor