Angularjs绑定没有被更新

我面临一个问题，我的角色js绑定没有被正确更新。我想通过点击“下一步”按钮来实现隐藏某些表单元素并显示其他人的方法。Angularjs绑定没有被更新

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

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

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

来源

2014-10-05 Fouad

发现了两个问题，在你的小提琴代码：

首先，分配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 = ''; 
     }

这是您的小提琴的叉子，上面提到了更正：http://jsfiddle.net/JohnnyEstilles/uz8zf2b0/。

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++; 
 
      }; 
 
     } 
 
     ]);

<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>

来源

2014-10-05 16:51:52 JME

删除我的回答和upvoted约翰尼Estilles。 – 2014-10-06 04:43:32

@SameerShemna那是你的优雅。 – JME 2014-10-06 04:48:02

@JohnnyEstilles非常感谢您的时间和精力。 – Fouad 2014-10-06 05:14:54

Angularjs绑定没有被更新

回答

相关问题