具有Ng重复的动态Ng模型

Question

I have a set of tabs:

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

I'm attempting to set a dynamic ng-model with ng-model = "Text".

First of all, I know that if I really want to add dynamic ng-models, I can't have them all the same (need to somehow add $index to Text). However, the most pressing issue is that $scope.Text is undefined, even though I clearly have added a textarea with ng-model Text.

What am I doing wrong?

Thanks.

Answer 1

我认为，如果在选项卡中找不到ng-model的值，它将得到未定义。

Answer 2

Why don't you just make text a property of each tab? So instead of doing this:

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

Do this:

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

Answer 3

Text[Value]

That implies you're trying to access a property called "Value" on an object called "Text". If it was just "Text" then angular would create a variable called "Text" on your scope object and all would be well but since you're trying to access a property on the variable before it has actually been created you're getting the reference error.

I'm assuming you have a controller, in which case do:

$scope.Text = {}

within the controller and what you have should work.

Answer 4

I am assuming the issue you're running into is trying to have each tab have their own scope for the tab title. To work with your current setup, you will need to just have the model for the <textarea> be set to the tab.title itself. This way, it will be tied to that particular tab.

<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