下拉列表不会根据范围值angularjs进行更新

时间：2018-03-06 10:56:02

标签： javascript html angularjs angularjs-scope angularjs-ng-repeat

过去几天我一直在研究一些功能。

每当我选择下拉列表时，都需要捕获索引值。同时，当我点击删除按钮时，应删除一台电视，并在下拉列表中更新剩余的电视。

但问题是在删除选定的电视时，索引值已更新，但ng模型（下拉列表）未更新为connectTVs.index值。我失踪的地方？

以下是代码段。

// Code goes here

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.noOfTVs = [{
    index: 0,
    value: 'How many Dish TVs?'
  }, {
    index: 1,
    value: 'Connect 1 Dish TV'
  }, {
    index: 2,
    value: 'Connect 2 Dish TVs'
  }, {
    index: 3,
    value: 'Connect 3 Dish TVs'
  }, {
    index: 4,
    value: 'Connect 4 Dish TVs'
  }, {
    index: 5,
    value: 'Connect 5 Dish TVs'
  }, {
    index: 6,
    value: 'Connect 6 Dish TVs'
  }, {
    index: 7,
    value: 'Connect 7 Dish TVs'
  }, {
    index: 8,
    value: 'Connect 8 Dish TVs'
  }];
  $scope.connectTVs = $scope.noOfTVs[0];
  $scope.onChangeMethod = function(connectTVsIndex) {
    // Doing some actions
    $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
    alert($scope.connectTVs.index);
  }
  $scope.removetv = function(connectTVsIndex) {
    $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
    $scope.connectTVs.index = $scope.connectTVs.index - 1;
    alert($scope.connectTVs.index);

  }
});
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
  </head>
<h3>Demo App</h3>

<div ng-controller="myCtrl">
    <select id="connectTV" aria-label="How many Dish TVs"
            ng-model="connectTVs"
            ng-change="onChangeMethod(connectTVs.index)"
            class="selector" aria-required="true"
            ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
  </select>

<br><br>
    <div>
      <button ng-click="removetv(connectTVs.index)">Remove TV </button>
    </div>
</div>
  </body>
</html>

3 个答案:

答案 0 :(得分：0)

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.noOfTVs = [{
    index: 0,
    value: 'How many Dish TVs?'
  }, {
    index: 1,
    value: 'Connect 1 Dish TV'
  }, {
    index: 2,
    value: 'Connect 2 Dish TVs'
  }, {
    index: 3,
    value: 'Connect 3 Dish TVs'
  }, {
    index: 4,
    value: 'Connect 4 Dish TVs'
  }, {
    index: 5,
    value: 'Connect 5 Dish TVs'
  }, {
    index: 6,
    value: 'Connect 6 Dish TVs'
  }, {
    index: 7,
    value: 'Connect 7 Dish TVs'
  }, {
    index: 8,
    value: 'Connect 8 Dish TVs'
  }];
  $scope.connectTVs = {}
  $scope.connectTVs['val'] = $scope.noOfTVs[0];
  $scope.onChangeMethod = function(connectTVsIndex) {
    // Doing some actions
    $scope.connectTVs['val'] = $scope.noOfTVs[connectTVsIndex];
    alert($scope.connectTVs['val'].index);
  }
  $scope.removetv = function(connectTVsIndex) {
    alert($scope.connectTVs['val'].index);
    console.log(connectTVsIndex)
    $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
    $scope.connectTVs.index = $scope.connectTVs.index - 1;

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-controller="myCtrl">
    <select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs['val']" ng-change="onChangeMethod(connectTVs['val'].index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
      </select>
    <br><br>
    <div>
      <button ng-click="removetv(connectTVs['val'].index)">Remove TV </button>
    </div>
  </div>
</body>

答案 1 :(得分：0)

您的解决方案无需更改索引（甚至保​​留索引）。只需使用.splice()弹出数组，然后使用$index或.indexOf()提供索引。这是一个演示：

＆＃13;
＆＃13; 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.noOfTVs = [{
    index: 0, value: 'How many Dish TVs?'}, {
    index: 1, value: 'Connect 1 Dish TV'}, {
    index: 2, value: 'Connect 2 Dish TVs'}, {
    index: 3, value: 'Connect 3 Dish TVs'}, {
    index: 4, value: 'Connect 4 Dish TVs'}, {
    index: 5, value: 'Connect 5 Dish TVs'}, {
    index: 6, value: 'Connect 6 Dish TVs'}, {
    index: 7, value: 'Connect 7 Dish TVs'}, {
    index: 8, value: 'Connect 8 Dish TVs'}
  ];
  $scope.connectTVs = $scope.noOfTVs[0];

  $scope.onChangeMethod = function(index){ 
    /* can be like:
       $scope.noOfTVs[index].index = index;
    */
  }

  $scope.removetv = function(value) {
    var index = $scope.noOfTVs.indexOf(value);
    $scope.noOfTVs.splice(index, 1)
    $scope.connectTVs = $scope.noOfTVs[index - 1] || $scope.noOfTVs[index] || null;
  }

});
＆＃13; 
<script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<h3>Demo App</h3>
<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="connectTVs" ng-change="onChangeMethod($index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
      </select>
  <br><br>
  <div>
    <button ng-click="removetv(connectTVs)">Remove TV</button>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

在removetv（）方法中分配ng-model后，您正在更新索引。 而且，您在此方法中更新了索引变量。 试试这个。

＆＃13;
＆＃13; 
// Code goes here

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.noOfTVs = [{
    index: 0,
    value: 'How many Dish TVs?'
  }, {
    index: 1,
    value: 'Connect 1 Dish TV'
  }, {
    index: 2,
    value: 'Connect 2 Dish TVs'
  }, {
    index: 3,
    value: 'Connect 3 Dish TVs'
  }, {
    index: 4,
    value: 'Connect 4 Dish TVs'
  }, {
    index: 5,
    value: 'Connect 5 Dish TVs'
  }, {
    index: 6,
    value: 'Connect 6 Dish TVs'
  }, {
    index: 7,
    value: 'Connect 7 Dish TVs'
  }, {
    index: 8,
    value: 'Connect 8 Dish TVs'
  }];
  $scope.connectTVs = $scope.noOfTVs[0];
  $scope.onChangeMethod = function(connectTVsIndex) {
    // Doing some actions
    $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
    alert($scope.connectTVs.index);
  }
  $scope.removetv = function(connectTVsIndex) {
    $scope.connectTVs.index = $scope.connectTVs.index - 1;
    alert($scope.connectTVs.index);
    $scope.connectTVs = $scope.noOfTVs[$scope.connectTVs.index];
  }
});
＆＃13; 
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
  </head>
<h3>Demo App</h3>

<div ng-controller="myCtrl">
        <select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs" ng-change="onChangeMethod(connectTVs.index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
      </select>
<br><br>
    <div>
      <button ng-click="removetv(connectTVs.index)">Remove TV </button>
    </div>
</div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题