Question

我遇到的问题是我的角度js绑定未正确更新。我试图通过单击“下一步”按钮来隐藏某些表单元素并显示其他表单元素。

我在控制器中设置了一些对象来保存输入文本字段和菜单下拉列表的值，我还设置了几个按钮（下一个和上一个和添加）按钮，以便能够添加新对象以及下一个和上一个按钮，以便能够在不同的存储对象之间导航。

我面临的问题是当我按下一个和上一个按钮时输入文本字段正在正确更新，但下拉菜单不是。

This is a link to a jsfiddle to help show the problem:
http://jsfiddle.net/bLs9yu3f/

Answer 1

在您的小提琴中找到了两个代码问题：

首先，在为对象的programOutcomes键分配affects时（在创建初始对象和推送添加新对象时），您可以直接分配programOutcomes，分配affects: JSON.parse(JSON.stringify(programOutcomes))指向原始数组的指针，不会创建副本。有很多方法可以做到这一点。我选择$scope.output.outcomes.push({ outcome: '', affects: JSON.parse(JSON.stringify(programOutcomes)) });。请参阅下面的示例。

for

其次，在addCourseOutcome函数的$scope.output.outcomes[0]循环中，您引用的是$scope.output.outcomes，而不是您推送的最新var lastest = $scope.output.outcomes.length - 1; for (var i = 0; i < programOutcomes.length; i++) { $scope.output.outcomes[lastest].affects[i].how = ''; }。以下代码修复了此问题。

  angular.module('myapp', []).controller('ProgramsController', ['$scope',
    function($scope) {
      var programOutcomes = [{
        outcome: 'po1'
      }, {
        outcome: 'po2'
      }, {
        outcome: 'po3'
      }, {
        outcome: 'po4'
      }];
      $scope.input = {
        outcomeCounter: 0,
        programOutcomes: programOutcomes,
        actions: ['', 'I', 'E', 'R']
      };

      $scope.output = {
        outcomes: [{
          outcome: '',
          affects: JSON.parse(JSON.stringify(programOutcomes))
        }]
          };
          for (var i = 0; i < programOutcomes.length; i++) {
            $scope.output.outcomes[0].affects[i].how = '';
          }
          $scope.nextOutcome = function() {
            $scope.input.outcomeCounter++;
          };
          $scope.previousOutcome = function() {
            $scope.input.outcomeCounter--;
          };
          $scope.deleteCourseOutcome = function() {
            $scope.output.outcomes.splice($scope.input.outcomeCounter, 1);
            $scope.input.outcomeCounter--;
          };
          $scope.addCourseOutcome = function() {
            $scope.output.outcomes.push({
              outcome: '',
              affects: JSON.parse(JSON.stringify(programOutcomes))
            });
            /**
             * create a 'how' property in the affects array
             * to be used for storage of I, E, R
             */
            var lastest = $scope.output.outcomes.length - 1;
            console.log($scope.output.outcomes[lastest].affects);
            for (var i = 0; i < programOutcomes.length; i++) {
              $scope.output.outcomes[lastest].affects[i].how = '';
            }
    
            /**
             * increment the outcomeCounter
             */
            $scope.input.outcomeCounter++;
          };
        }
      ]);

这是你的小提琴的一个分支，我上面提到了更正：http://jsfiddle.net/JohnnyEstilles/uz8zf2b0/。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
    <div ng-controller="ProgramsController">
        <div class="form-group">
            <label for="outcome">Outcome</label>
            <input id="outcome" placeholder="Outcome" class="form-control" ng-model="output.outcomes[input.outcomeCounter].outcome">
        </div>
        <div class="form-group">
            <table class="table table-striped">
                <tr ng-repeat="programOutcome in input.programOutcomes">
                    <td>{{programOutcome.outcome}}</td>
                    <td>
                        <select ng-model="output.outcomes[input.outcomeCounter].affects[$index].how" ng-options="value for value in input.actions">
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        <div class="form-group">
            <button class="btn" ng-click="addCourseOutcome()">Add outcome</button>
            <button class="btn" ng-click="nextOutcome()"
                    ng-if="output.outcomes.length>1 && input.outcomeCounter !== (output.outcomes.length - 1)">
                Next
            </button>
            <button class="btn" ng-click="previousOutcome()"
                    ng-if="output.outcomes.length>1 && input.outcomeCounter > 0">
                Previous
            </button>
            <button class="btn btn-warning" ng-click="deleteCourseOutcome()">Delete outcome</button>
        </div>
    </div>
</body>

{{1}}

Angularjs绑定未更新

1 个答案: