[Angular JS]-选项卡窗格示例-动态添加选项卡

Question

我使用了 Angular JS 主页中的示例并对其进行了修改以满足要求。

我在范围数组中添加了选项卡信息，并在某些条件下操作数据。

问题：

1. 我在 tabItem.title 上附加了一个 ng-bind，所以文本框中的任何更改都会更新标题，但我想将标题的显示限制为 10 个字符
2. 当我创建一个新选项卡时，我希望该选项卡成为选定的选项卡。
3. 我如何根据所采取的某些操作来选择一个选项卡（例如单击从选项卡 1 移动到选项卡 2）

小提琴：http://jsfiddle.net/austinnoronha/NWwcT

    <br/><br/>
    <div ng-cloak ng-app="TabsApp">
    <div class="container" ng-controller="TabManagerCtrl">
        <span class="label label-info label-ext" ng-click="tabManager.addTab()" style="cursor:pointer">Add a Tab</span><br/><br/>

        <div>
        <div tabs>
            <div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title }}">
            <p>{{ tabInfo.content }}</p>
            <input type="text" ng-model="tabInfo.title" ng-change="tabManager.getTitle(tabInfo)">
            </div>
        </div>
        </div>

        <br/><br/><br/>

    </div><!-- /container -->
    </div> <!-- /container -->
    </div> <!-- /app -->

Answer 1

这很奇怪... limitTo 过滤器似乎不起作用，但您可以创建一个新过滤器并更改您的行

<div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title }}">

通过

<div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title | limit:10}}">

与

angularApp.filter('limit', function() {
    return function (input, value) {
        return input.substr(0,value);
    };
});

对于选择一个，我认为它不起作用，因为您必须有权访问窗格范围。一种方法是在创建它时从窗格中访问该属性。在窗格指令中，只需添加：

if(scope.$parent.tabInfo.selected) tabsCtrl.select(scope);

就在tabsCtrl.addPane(scope); 行之后。但是您还必须更改 tabs 指令，以便该行

$scope.select = function(pane) {

成为

this.select = $scope.select = function(pane) {

对于您的第三个问题，我不知道如何在该方案中做到这一点。

我会让窗格指令不同，将 select 函数从指令中取出，并将其直接绑定到您的 tabManager 对象。 像这样：http://jsfiddle.net/NWwcT/2/ 在这种情况下，您有 3 个要求，您可以通过调用 tabManager.select(index) 从外面选择选项卡