基于下拉菜单中选项的选择,动态更新表的Angularjs代码

问题描述 投票:0回答:1

我是Angularjs的新手。我在UI中有一个表和一个按钮(更新)。我在表格的第3列中有一个下拉选项。.现在,基于我在下拉列表中选择的选项,然后单击“更新”按钮,应该使用计算值更新表格第4和第5列对应于modelId和所选公式。

我已附上代码。请通过单击更新按钮来帮助我使用下拉列表和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="[email protected]" 
  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>
javascript jquery css angularjs html.dropdownlistfor
1个回答
0
投票

嗨,js需要整理一些,这有点像您想要的。我是angularjs的新手,但这似乎有点像knockoutjs。在淘汰表中,有计算变量,一切都在需要时更新。因此,您不需要更新按钮。但是我对angularjs并不陌生,看起来有些棘手。

关于您的问题,我只是输入了一些随机值,因为我不知道您想要什么方程式。但是我希望这向您展示了一些基础知识。

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

  <head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="[email protected]" 
  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>
© www.soinside.com 2019 - 2024. All rights reserved.