具有Ng重复的动态Ng模型

时间:2015-07-15 21:14:51

标签: javascript angularjs

我有一组标签:

 <tabset class="tab-container">
    <tab id = "tabContent" ng-repeat="tab in tabs" active="tab.active" ng-model = "cmModel"> <!-- the tab highlight directive -->
      <tab-heading>
      <span>{{tab.title}}</span>
      <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i> <!-- the tab close button -->
    </tab-heading>

    <textarea ui-codemirror='cmOption' id="{{ 'Tab ' + ($index+1) }}"  ng-model = "Text"> + "awefwef" + </textarea>

  </tab>
  <button class="btn btn-default" ng-click="addTab()"></button>
</tabset>

我正在尝试使用ng-model =“Text”设置动态ng模型。

首先,我知道如果我真的想添加动态ng模型,我不能让它们全部相同(需要以某种方式将$ index添加到Text)。然而,最紧迫的问题是$ scope.Text未定义,即使我明显添加了带有ng-model文本的textarea。

我做错了什么?

感谢。

4 个答案:

答案 0 :(得分:0)

我认为如果在标签中找不到ng-model的值,它将得到一个未定义的。

答案 1 :(得分:0)

为什么不将文本作为每个标签的属性?所以不要这样做:

<textarea ng-model="Text[tab.title]"></textarea>

这样做:

<textarea ng-model="tab.text"></textarea>

答案 2 :(得分:0)

Text[Value]

这意味着您正在尝试访问名为&#34; Value&#34;在一个名为&#34; Text&#34;的对象上。如果只是&#34; Text&#34;然后angular将创建一个名为&#34; Text&#34;的变量。在你的范围对象上,一切都会很好但是因为你在实际创建变量之前尝试访问变量上的属性,所以你得到了引用错误。

我假设你有一个控制器,在这种情况下:

$scope.Text = {}

在控制器内,你应该有什么工作。

答案 3 :(得分:0)

我假设您遇到的问题是尝试让每个标签都有自己的标签标题范围。要使用当前设置,您需要将<textarea>的模型设置为tab.title本身。这样,它将与该特定选项卡绑定。

<tabset class="tab-container">
    <tab ng-repeat="tab in tabs" ng-model="cmModel">
        <tab-heading>
            <p>{{tab.title}}</p>
        </tab-heading>
        <br/>
        <textarea id="{{"Tab"+($index+1)}}" ng-model="tab.title"></textarea>
    </tab>
    <p><button class="btn btn-default" ng-click="addTab()">Add Tab</button></p>
</tabset>

Working JSFiddle Demonstration