在角度 JS 中打开特定列表

Opening specific list in angular JS

本文关键字：列表 JS      更新时间：2023-09-26

我使用以下代码尝试以角度ng-repeat。我需要显示我单击的列表。但是当我单击符号~时，它显示了所有列表。

使用ng-repeat时如何指定此类条件？

.HTML

<div ng-app='myapp' ng-controller='cntrl'>
  <input ng-model="addy" />
  <button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
  <span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
  <ul class="w3-ul">
      <li ng-repeat="x in names" class="w3-padding-hor-16">
        <span ng-click="expand()">~{{x}}
          <ul ng-show='show'>
            <li ng-repeat="Y in features[$index]">{{Y}}</li>
          </ul>
        </span>
      </li>
  </ul>
</div>

角度 JS

<script>
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
   $scope.names = ['Fruits', 'Veggies', 'Cars'];
   $scope.show= false ;
   $scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
   $scope.expand=function(){
     $scope.show = !$scope.show;
   }
   $scope.add = function(){
   $scope.span = false
   if($scope.names.indexOf($scope.addy) === -1)
     $scope.names.push($scope.addy);
   else
    $scope.span = true;
   }
});
</script>

请检查一下

var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
   $scope.names = ['Fruits', 'Veggies', 'Cars'];
   $scope.show= false ;
   $scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
   $scope.expand=function(index){
     
     $scope.expanded = ($scope.expanded != index)?index:-1;
   }
   $scope.add = function(){
   $scope.span = false
   if($scope.names.indexOf($scope.addy) === -1)
     $scope.names.push($scope.addy);
   else
    $scope.span = true;
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myapp' ng-controller='cntrl'>
  <input ng-model="addy" />
  <button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
  <span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
  <ul class="w3-ul">
      <li ng-repeat="x in names" class="w3-padding-hor-16">
        <span ng-click="expand($index)">~{{x}}
          <ul ng-show='expanded == $index'>
            <li ng-repeat="Y in features[$index]">{{Y}}</li>
          </ul>
        </span>
      </li>
  </ul>
</div>

相关文章：