Question

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

我在范围数组中添加了标签信息，并在某些条件下操纵数据。

的问题：

我在tabItem.title上附加了一个ng-bind，所以文本框中的任何更改都会更新标题，但我想限制标题的显示为10个字符
当我创建一个新标签时，我希望该标签成为所选标签。
如何根据所采取的某些操作选择标签（例如从标签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/ 在此cas中，您有3个要求，您可以通过拨打tabManager.select(index)

从ouside中选择标签

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

1 个答案: