更新模型值并从ng-repeat中的按钮更新DOM

Update a model value and update DOM from button in ng-repeat

本文关键字：更新 按钮 DOM 模型 ng-repeat      更新时间：2023-09-26

我有一个按钮，每个网站的状态显示每个网站在服务器上的状态(停止或启动)。

按钮基本上被视为切换器，所以我可以为模型的每个元素更新状态变量的值。

<tr ng-repeat="website in model">
<td>{{website.Name}}</td>
<!-- website state can have either value **stopped** or **started** -->
<td>
<i class="fa fa-toggle-on active"ng-if="website.State == 'Started'" ng-model="website" ng-click="changeStatus(website)">
</i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="website.State == 'Stopped'" ng-model="website" ng-click="changeStatus(website)">
</i>
</tr>

controller:

$scope.changeStatus = function (x) {
    alert(x.Name);
    //$scope[x].State == 'Stopped'

    //if ($scope.State== 'Started')
    //    $scope.State = "Stopped";
    //else
    //    $scope.State = "Started";
}

要求:

我需要更新值，如果它是停止的，而不是改变它开始，反之亦然。

到目前为止我找不到任何解决办法。alert语句运行良好。但是我需要更新模型，模型应该绑定到html中的元素。因此，当我将按钮从"开始"更改为"停止"时，模型值也应该改变，因此按钮应该基于ng-if

从开始到停止
  • ng-model for <i>将不工作
  • 在您的示例中打开但未关闭<td>元素
    • 传递给changeStatus函数的
  • 参数是一个对象。所以它是通过引用传递的。

angular.module('models', []).controller('websites',
  function($scope) {
    $scope.websites = [{
      Name: 'foo',
      State: 'Started'
    }, {
      Name: 'bar',
      State: 'Stoped'
    }];
  
  
    $scope.changeState = (website) => {
       if (website.State == 'Started') {
         website.State = 'Stoped';
       } else {
          website.State = 'Started';
       }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="models" ng-controller="websites">
  <div ng-repeat="website in websites">
    <h1>{{ website.Name }}</h1>
    <button ng-click="changeState(website)">
      {{ website.State }}      
    </button>
    
    <button ng-if="website.State == 'Stoped'" ng-click="changeState(website)">
      Stoped
    </button>
    
    <button ng-if="website.State == 'Started'" ng-click="changeState(website)">
      Started
    </button>
  </div>
</div>

相关文章：