Question

我尝试过使用简单的ng-hide或ng-show指令，但似乎没有任何工作。我尝试实现一个函数，以便当其中一个块被点击时，其他块消失，但到目前为止没有任何反应。如果有人能帮助我，我会非常感激！

HTML：

<span id="photos" ng-repeat= "c in colors" >
    <a ng-href = "{{c.link}}" ><img ng-click = "clickFunc()" ng-src="{{c.color}}" /></a>
enter code here
</span>

JavaScript的：

teamSite.controller('myCtrl', function($scope) {
	$scope.colors = [
	                 {color: "yellow.png", val: false, link: "#yellow"},
	                 {color: "white.jpg", val: false, link: "#white"},
	                 {color: "green.png", val: false, link: "#green"},
	                 {color: "orange.jpg", val: false, link: "#orange"}
	             ];
	$scope.clickFunc = function(c){
	c.val = true;
	for (var x in colors){
		if (x.val == false)
			{
			delete x.color;
			};
	};

});

Answer 1

你的控制器：

$scope.colors = [
                 {color: "yellow.png", val: false, link: "#yellow"},
                 {color: "white.jpg", val: false, link: "#white"},
                 {color: "green.png", val: false, link: "#green"},
                 {color: "orange.jpg", val: false, link: "#orange"}
             ];

$scope.clickFunc = function(c){
    $scope.colors[c].val = true;
}

你的HTML：

<span id="photos" ng-repeat= "c in colors track by $index" >
    <a ng-hide="c.val" ng-href="{{c.link}}"><img ng-click="clickFunc($index)" ng-src="{{c.color}}" />enter code here</a>
</span>

首先，你没有将任何内容传递给你的clickFunc然后它很容易实现

Answer 2

这可以通过ng-show完成。

<span id="photos" ng-repeat= "c in colors" >
<div ng-show="c.val===false"> 
<a ng-href = "{{c.link}}" ><img ng-click = "clickFunc(c)" ng-src="{{c.color}}" /></a> </div>

</span>

控制器。

teamSite.controller('myCtrl', function($scope) {
$scope.colors = [
                 {color: "yellow.png", val: false, link: "#yellow"},
                 {color: "white.jpg", val: false, link: "#white"},
                 {color: "green.png", val: false, link: "#green"},
                 {color: "orange.jpg", val: false, link: "#orange"}
             ];
$scope.clickFunc = function(c){

for (var x in colors){
    x.val=true;
}
 c.val = false;
 }

});

Answer 3

您可以使用ng-repeat

进行隐藏或过滤

 <span id="photos" ng-repeat="c in colors | filter: selectedColor">
   <a ng-href = "{{c.link}}"><span ng-click = "clickFunc(c)" style="background-color:{{c.color}}" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
</span>

$scope.selectedColor = undefined;
  $scope.clickFunc = function(c) {
  console.log(c);
  $scope.selectedColor = c.color;
}

以下是Sample我已将图像更改为颜色。

Answer 4

按如下方式更改控制器，

$scope.colors = [
    {color: "yellow.png", val: false, link: "#yellow"},
    {color: "white.jpg", val: false, link: "#white"},
    {color: "green.png", val: false, link: "#green"},
    {color: "orange.jpg", val: false, link: "#orange"}
];

$scope.clickFunc = function (index) {
    for(var i=0; i<$scope.colors.length; i++) {
        // change the value of `val` to true for other colors
        if(i != index) {
            $scope.colors[i].val = true;   
        }
    }
}

在html中添加ng-hide和track by $index短语，如下所示，

<!-- Add `track by $index` inside `ng-repeat` clause -->
<span id="photos" ng-repeat="c in colors track by $index" >
    <!-- Add `ng-hide` to your tag --> 
    <a ng-hide="c.val" ng-href="{{c.link}}"><img ng-click="clickFunc($index)" ng-src="{{c.color}}">
        enter code here
    </a>
</span>

希望这可以解决问题。

使用AngularJS：我的网页上有四个彩色方块。当我点击其中一个时，我希望其他三个消失

4 个答案: