Question

在我的项目中，red Number div是一个按钮，我需要隐藏数字100,4,9,14，因为opacity:0"按钮可以点击，所以我使用＆＃34;显示无。＆＃34;

如何判断数字100 div并隐藏它？我不知道如何使用ng-class或ng-hide来隐藏号码4,9,14 div。

这是我的代码：

.bigDiv {
        width: 500px;
        height: 500px;
        margin: 400px auto;
        background-color: black;
    }

    ul {
        font-size: 0px;
        padding-left: 0px;
    }
    .circle {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: green;
        position: relative;
    }

    .todo-last {
        position: absolute;
        width: 33px;
        height: 33px;
        background-color: red;
        left: 25px;
        top: 25px;
        font-size: 25px;
        color: white;
    }
    .bigDiv li {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: purple;
    }




     <body ng-app="app" ng-controller="controller">
     <div class="bigDiv">
         <ul>
             <li ng-repeat="todo in todoArray">
                 <div class="circle">
                     <div class="todo-last">
                         {{todo.text}}
                     </div>
                 </div>
             </li>
         </ul>
     </div>
</body>

<script>
      var app = angular.module('app',[]);
       app.controller('controller',["$scope",function ($scope) {
           var randomNum = Math.ceil(Math.random() * 15 + 1);
           var array = [];
           for(var i = 0 ; i < randomNum; i++){
               if((randomNum -2)===i ){
                   array.push({
                       text: 100
                   });
                   continue;
               }
               array.push(
                       {text: i}
               )
           }
           $scope.todoArray = array;

       }])
</script>

还有一件事只隐藏red div。

Answer 1

似乎你想根据数组值隐藏

首先在范围内编写一个函数来检查值是否在数组中

$scope.display = function(val){
  if($scope.todoArray.indexOf(val) < 0) 
     return true;
  else
     return false; 
};

你的html在你的ng-repeat中显示隐藏的ng-if：

<div ng-if="display(todo.text)">
    // your other code
</div>

AngularJs，设置＆＃34; 100,4,9,14＆＃34;元素显示无？

1 个答案: