angularjs在ng-repeat中使用ng-model遇到的问题

作为一名曾经使用Angular进行开发的开发者，我深知在ng-repeat中使用ng-model时可能遇到的困扰。有时，你可能会遇到无法获取绑定的数据内容的问题，或者当你尝试更改绑定的数据内容时，所有循环生成的内容都会一起改变。今天，我将分享一个我在使用Angular时遇到的类似问题及其解决方案，希望能对大家有所帮助。

假设你有一个城市列表，每个城市都有一个对应的选项列表。你想要在点击按钮时获取当前选择的数据。按照常规的方式使用ng-model绑定，你可能会发现无法获取到预期的结果。这是因为ng-repeat为每个元素创建了新的作用域，而ng-model的绑定是在这个作用域内进行的。当你尝试获取ng-model的值时，可能会得到undefined。

让我们来看一个简单的例子：

HTML部分：

```html

```

JavaScript部分：

```javascript

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

app.controller('selectController', function ($scope) {

$scope.citylist = [{id: 1, pop: "北京"}, {id: 2, pop: "上海"}, {id: 3, pop: "广州"}]; // 定义城市列表

$scope.cs = function () { // 定义函数来获取当前选择的城市

console.log($scope.citylist[$scope.$index].selectedCity); // 输出当前选择的城市

}; // 注意这里的$index是ng-repeat提供的特殊变量，表示当前元素的索引值。我们可以使用这个值来获取当前选择的城市。

}); // 注意这里的$scope.$index是ng-repeat提供的特殊变量，表示当前元素的索引值。我们可以使用这个值来获取当前选择的城市。

```

现在，每次点击确认按钮时，你都会得到当前选择的城市信息，而不会遇到所有内容一起改变的问题。这是因为我们为每个城市创建了一个单独的绑定变量（pop.selectedCity），而不是使用一个全局的变量。这样，每个城市的选择都是独立的，不会影响到其他城市的选择。希望这个解决方案能够帮助你在使用Angular时更好地处理ng-repeat和ng-model的问题。如果你在实际使用中遇到其他问题，也欢迎在评论区留言交流。