3

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

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

问题：

  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 -->
4

1 回答 1

3

这很奇怪...... 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 个要求，您可以通过调用从 ouside 中选择选项卡tabManager.select(index)

于 2013-08-21T14:56:16.717 回答