Question

 <body ng-app="tabus" >

 <div  ng-controller="sample" ng-init="tab=1">

    <div class="cb"  ng-repeat="x in tabs" ng-click="{{x.click}}">   {{x.title}}</div>


    <div ng-repeat="x in tabs" ng-show="{{x.click_reflect}}">
        <p>{{x.content}}</p>
     </div>


   </div>
</body>

 <script>
    var app=angular.module("tabus",[]);
    app.controller("sample",function($scope){
    $scope.tabs = [
        { click:'tab=1',click_reflect:'tab==1', title:'Dynamic Title 1', content:'Dynamic content 1' },
        { click:'tab=2',click_reflect:'tab==2', title:'Dynamic Title 2', content:'Dynamic content 2'  }
      ];
    });

    </script>

fiddle link我已经完成了角度js标签，首先我初始化了tab = 1，然后当我再次点击标签时，我宣布了值，之后我使用ng-show显示标签内容它仅适用于第一个选项卡仅当我单击第二个选项卡时，我无法获取选项卡内容

Answer 1

这是处理此问题的一种方法

var app=angular.module("tabus",[]);

app.controller("sample",function($scope){
$scope.tabs = [
 { active: true, title:'Dynamic Title 1', content:'Dynamic content 1' },
 { active: false, title:'Dynamic Title 2', content:'Dynamic content 2'  },
 { active: false, title:'Dynamic Title 3', content:'Dynamic content 3'  },
];
      
$scope.tabHandler = function(tab) {
  angular.forEach($scope.tabs, function(item) {
    item.active = false;
  })
        
  tab.active = true;
}
});

.cb {    
    list-style: none;
    padding: 10px;
    display:inline-block;
    background-color: #000;  
    color: #FFF;
    border: 1px solid black;
	border-radius: 5px;
        cursor: pointer;
}
.cb:hover{
	background-color: #4a4a4a; 
	color: #FFF;
}

<body ng-app="tabus" >

<div  ng-controller="sample" ng-init="tab=1">

        <div class="cb"  ng-repeat="x in tabs" ng-click="tabHandler(x)">{{x.title}}</div>
      
        
        <div ng-repeat="x in tabs" ng-show="x.active">
            <p>{{x.content}}</p>
         </div>
</div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

Angular js标签示例没有引导程序

1 个答案: