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);
    };
});

選択したものについては、ペインスコープにアクセスする必要があるため、機能しないと思います。これを行う 1 つの方法は、作成時にペインからプロパティにアクセスすることです。ペイン ディレクティブで、次を追加するだけです。

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

ラインの直後tabsCtrl.addPane(scope);。ただし、タブ ディレクティブも変更して、行が

$scope.select = function(pane) {

なる

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

3番目の質問については、そのスキームでそれを行う方法がわかりません。

ペイン ディレクティブを別のものにして、select関数をディレクティブから外し、それを直接 tabManager オブジェクトにバインドします。このように: http://jsfiddle.net/NWwcT/2/ この場合、3つの要件があり、呼び出して外側からタブを選択できますtabManager.select(index)

于 2013-08-21T14:56:16.717 に答える