Angularjs код для динамического c обновления таблицы на основе выбора опции в раскрывающемся списке - PullRequest
0 голосов
/ 30 марта 2020

Я новичок в Angularjs. У меня есть таблица и кнопка (Обновить) в пользовательском интерфейсе. У меня есть опция раскрывающегося списка в 3-м столбце таблицы. Теперь, основываясь на параметре, который я выбираю в раскрывающемся списке, а затем нажимаю кнопку «Обновить», столбцы таблицы 4 и 5 должны быть обновлены с вычисленными значениями. соответственно для ID модели и выбранной формулы.

Я приложил код. Пожалуйста, помогите мне с раскрывающимся списком и функцией js для обновления значений при нажатии кнопки обновления.

Прикрепленный img для ясного понимания.

введите описание изображения здесь

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>

1 Ответ

0 голосов
/ 31 марта 2020

Привет, js нужно было привести в порядок, и это как раз то, что вы хотите. Я новичок в angularjs, но это похоже на нокаут js. В нокауте js есть вычисляемые переменные, и все просто обновляется при необходимости. Таким образом, вам не нужна кнопка обновления. Но я новичок в angularjs, и это выглядит немного хитро.

Что касается вашей проблемы, я просто накачал некоторые случайные значения, так как я не знал, какое уравнение вы хотели. Но я надеюсь что это показывает вам некоторые основы.

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...