我有一个选择下拉列表，在“城市”更改时，我得到的是先前选择的值而不是当前选择值。例如：在这里，如果我选择州，然后再次选择城市，则div文本将处于状态下处于警告状态，但我想显示div文本在城市下。再次，我想将所有值一一显示为一条消息，在这里我只能显示最后一个值。任何人都可以帮助我2个问题。这是下面的代码。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}"><p>{{emp[attr]}}</p></div>
<div class="error">{{col}}</div>
</div>
</div>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'one'
},
{
title: 'title2',
name: 'name2',
details: 'two'
},
{
title: 'title3',
name: 'name2',
details: 'three'
}
]
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
$('div.test').each(function(i,div){
var listitem = div;
$scope.col = $(div).find("p").text();
alert($scope.col);
});
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
答案 0 :(得分：0)
我测试了您的代码，基本的angularjs语法看起来正确并且可以正常工作。
您应该考虑的是避免混合使用jQuery和angularjs。 jQuery可以做什么-您可以通过angularjs的方式使用angularjs进行操作，只需学习它即可。
这是一个有效的示例，其中删除了jQuery内容。
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'details1'
},
{
title: 'title2',
name: 'name2',
details: 'details2'
},
{
title: 'title3',
name: 'name3',
details: 'details3'
}
]
$scope.update = function() {
if ($scope.id == 'city') {
$scope.attr = 'details';
}else if ($scope.id == 'state') {
$scope.attr = 'title';
}else if ($scope.id == 'country') {
$scope.attr = 'name';
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="id" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}"><p>{{emp[attr]}}</p></div>
<div class="error">{{col}}</div>
</div>
</div>