更新 ng-class 上的特定对象
Update specific object on ng-class
我有兴趣更新 ng-class 上的特定对象,因为我的视图包含许多对象,我想从循环中对特定对象应用更新。
<div>
<div class="baseMap">
<i ng-repeat="society in societyImage"
class="icon box"
ng-class="{ 'bigger': society.bigger }"
ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
ng-click="showAlert($index)"></i>
</div>
</div>
/// 按钮点击索引 animateMapItem($index);
我的 JS 函数
var self = $scope;
self.bigger = false;
self.lightTheme = false;
$scope.animateMapItem = function (index) {
//self.bigger = !self.bigger;
var listTitle = $scope.listItem[index].indicatorEn;
var _societyObj = [];
_societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});
$log.log(_societyObj);
_societyObj.bigger = true;
};
我的CSS
.baseMap .icon {
position: absolute;
background-size: 100% 100%;
width: 40px;
height: 40px;
display: block;
}
.box {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.box.bigger {
width: 60px;
height: 60px;
}
现在它正在将所有项目更新为更大,因为我想在单击按钮时更新特定项目
_societyObj
是一个本地对象,您不能在 html 中的视图部分使用它。将其设为 scope object 然后只有你可以在 html 视图部分使用它。将视图部分中使用的所有本地对象更改为 $scope 对象。否则您的代码无法按预期工作
但是 $scope.animateMapItem
函数总是 return true 为什么???它没有任何意义
$scope only be communicated between the controller and the view part
its two way binding
$scope.societyObj = [];
$scope.societyObj.bigger = true;
else return函数末尾的_societyObj应该是
$scope.animateMapItem = function (index) {
//self.bigger = !self.bigger;
var listTitle = $scope.listItem[index].indicatorEn;
var _societyObj = [];
_societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});
$log.log(_societyObj);
_societyObj.bigger = true;
return _societyObj.bigger; // it always return true it doesn't make any sense
};
在你的html
<div class="baseMap">
<i ng-repeat="society in societyImage"
class="icon box"
ng-class="{ 'bigger': animateMapItem($index) }"
ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
ng-click="showAlert($index)"></i>
</div>
我有兴趣更新 ng-class 上的特定对象,因为我的视图包含许多对象,我想从循环中对特定对象应用更新。
<div>
<div class="baseMap">
<i ng-repeat="society in societyImage"
class="icon box"
ng-class="{ 'bigger': society.bigger }"
ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
ng-click="showAlert($index)"></i>
</div>
</div>
/// 按钮点击索引 animateMapItem($index);
我的 JS 函数
var self = $scope;
self.bigger = false;
self.lightTheme = false;
$scope.animateMapItem = function (index) {
//self.bigger = !self.bigger;
var listTitle = $scope.listItem[index].indicatorEn;
var _societyObj = [];
_societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});
$log.log(_societyObj);
_societyObj.bigger = true;
};
我的CSS
.baseMap .icon {
position: absolute;
background-size: 100% 100%;
width: 40px;
height: 40px;
display: block;
}
.box {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.box.bigger {
width: 60px;
height: 60px;
}
现在它正在将所有项目更新为更大,因为我想在单击按钮时更新特定项目
_societyObj
是一个本地对象,您不能在 html 中的视图部分使用它。将其设为 scope object 然后只有你可以在 html 视图部分使用它。将视图部分中使用的所有本地对象更改为 $scope 对象。否则您的代码无法按预期工作
但是 $scope.animateMapItem
函数总是 return true 为什么???它没有任何意义
$scope only be communicated between the controller and the view part its two way binding
$scope.societyObj = [];
$scope.societyObj.bigger = true;
else return函数末尾的_societyObj应该是
$scope.animateMapItem = function (index) {
//self.bigger = !self.bigger;
var listTitle = $scope.listItem[index].indicatorEn;
var _societyObj = [];
_societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});
$log.log(_societyObj);
_societyObj.bigger = true;
return _societyObj.bigger; // it always return true it doesn't make any sense
};
在你的html
<div class="baseMap">
<i ng-repeat="society in societyImage"
class="icon box"
ng-class="{ 'bigger': animateMapItem($index) }"
ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
ng-click="showAlert($index)"></i>
</div>