- 首页
- 其他开发
- 在 angular ui bootstrap 中控制 isOpen
在 angular ui bootstrap 中控制 isOpen
[英] controlling isOpen in angular ui bootstrap
本文介绍了在 angular ui bootstrap 中控制 isOpen的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在 angualr ui bootstrap 手风琴指令中使用 isOpen 属性，以便它会打开手风琴中第一个 ng-repeat 的第一个元素.我尝试了几件事但没有运气.有人可以就此提出建议吗?
//html<div ng-show="accordionCtrl.isNotString(value);"class="accordionContainer" ng-repeat="(key, value) incordionCtrl.lessons"><div class="accordionStepBox"><h4 class="accordionStepTitle">步骤{{$index+1}}:{{value.title}}</h4><span>总结:{{value.summary}}</span>
<div class="accordionCoursesBox"><div class="accordionCoursesText">课程</div><!-- 用于 suffles 的手风琴 --><uib-accordion close-others="accordionCtrl.oneAtATime"><!-- 只为对象 vals 提供手风琴 --><div class="accordion" ng-show="accordionCtrl.isNotString(value);"ng-repeat="(key, value) in value"><!-- <uib-accordion-group Heading="{{value.title}}" is-open="accordionCtrl.firstIndex($index)">--><uib-accordion-group Heading="{{value.title}}"><div ng-repeat="(key, value) in value"><div ng-show="accordionCtrl.isNotString(value);"class="accordionSuffleBox">{{$index+1}}.{{value.title}}
<br/><button ui-sref="lesson" class="btn btn-default Accordionbutton">开始</button></uib-accordion-group>
</uib-手风琴>
//控制器有角的.module('neuralquestApp').controller('AccordionCtrl', AccordionCtrl);函数 AccordionCtrl(FirebaseUrl, $firebaseObject, $firebaseArray) {var 手风琴Ctrl = this;var getLessons = getLessons;手风琴Ctrl.oneAtATime = true;手风琴Ctrl.init = init;手风琴Ctrl.init();手风琴Ctrl.isNotString = isNotString;手风琴Ctrl.firstIndex = firstIndex;/*======================================= 实施 =======================================*/函数初始化(){获取课程()；}函数 firstIndex(index) {如果(索引 === 0){返回真；} 别的 {返回假；}}函数 getLessons() {var ref = new Firebase(FirebaseUrl);手风琴Ctrl.lessons = $firebaseObject(ref.child('NeuralNetwork'));}函数 isNotString(val) {//console.log('val', val);if(typeof val === "字符串"){console.log('is string', val);返回假；} 别的 {返回真；}}}
解决方案
is-open 属性设置为与控制器进行 2 路绑定，因此您可以执行以下操作:
<uib-手风琴><div ng-repeat="分组"><uib-accordion-group Heading="{{group.title}}" is-open="openIndex[$index]">{{group.content}}</uib-accordion-group>
</uib-手风琴>
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {$scope.openIndex = [真];$scope.groups = [{title: '组标题 - 1',内容:'组正文 - 1'},{title: '组标题 - 2',内容:'组体 - 2'},{title: '组标题 - 3',内容:'组体 - 3'},{title: '组标题 - 4',内容:'组体 - 4'}];});
示例 plunk.此外，close-others 属性的默认值为 true，因此您无需将其显式设置为 true.
I would like use isOpen attributes in angualr ui bootstrap accordion directive so it would open the first element of the first ng-repeat in the accordion. I have tried few things with no luck. can anyone advise on this?
//html
<div ng-show="accordionCtrl.isNotString(value);" class="accordionContainer" ng-repeat="(key, value) in accordionCtrl.lessons">
<div class="accordionStepBox">
<h4 class="accordionStepTitle">Step {{$index+1}}: {{value.title}}</h4>
<span>Summary: {{value.summary}}</span>
</div>
<div class="accordionCoursesBox">
<div class="accordionCoursesText">Courses</div>
<!-- accordion for suffles -->
<uib-accordion close-others="accordionCtrl.oneAtATime">
<!-- only give accordion to object vals -->
<div class="accordion" ng-show="accordionCtrl.isNotString(value);" ng-repeat="(key, value) in value">
<!-- <uib-accordion-group heading="{{value.title}}" is-open="accordionCtrl.firstIndex($index)"> -->
<uib-accordion-group heading="{{value.title}}">
<div ng-repeat="(key, value) in value">
<div ng-show="accordionCtrl.isNotString(value);" class="accordionSuffleBox">
{{$index+1}}. {{value.title}}
</div>
</div>
<br/>
<button ui-sref="lesson" class="btn btn-default accordionbutton">Start</button>
</uib-accordion-group>
</div>
</uib-accordion>
</div>
</div>
//controller
angular
.module('neuralquestApp')
.controller('AccordionCtrl', AccordionCtrl);
function AccordionCtrl(FirebaseUrl, $firebaseObject, $firebaseArray) {
var accordionCtrl = this;
var getLessons = getLessons;
accordionCtrl.oneAtATime = true;
accordionCtrl.init = init;
accordionCtrl.init();
accordionCtrl.isNotString = isNotString;
accordionCtrl.firstIndex = firstIndex;
/*======================================
= IMPLEMENTATION =
======================================*/
function init() {
getLessons();
}
function firstIndex(index) {
if(index === 0){
return true;
} else {
return false;
}
}
function getLessons() {
var ref = new Firebase(FirebaseUrl);
accordionCtrl.lessons = $firebaseObject(ref.child('NeuralNetwork'));
}
function isNotString(val) {
// console.log('val', val);
if(typeof val === "string"){
console.log('is string', val);
return false;
} else {
return true;
}
}
}
解决方案
The is-open attribute is setup for 2 way binding with the controller, so you could do something like so:
<div ng-controller="AccordionDemoCtrl">
<uib-accordion>
<div ng-repeat="group in groups">
<uib-accordion-group heading="{{group.title}}" is-open="openIndex[$index]">
{{group.content}}
</uib-accordion-group>
</div>
</uib-accordion>
</div>
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.openIndex = [true];
$scope.groups = [
{
title: 'Group Header - 1',
content: 'Group Body - 1'
},
{
title: 'Group Header - 2',
content: 'Group Body - 2'
},
{
title: 'Group Header - 3',
content: 'Group Body - 3'
},
{
title: 'Group Header - 4',
content: 'Group Body - 4'
}
];
});
Example plunk. Also, the close-others attribute default value is true, so you don't need to explicitly set that to true.
这篇关于在 angular ui bootstrap 中控制 isOpen的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
