0

EDIT: Jonathan's suggestion worked. I tried using version 1.1.5 and that throws a "Duplicates in a repeater are not allowed" error for the duplicate empty strings. I'll accept an answer when I get home from work, this browser does not have much enabled.

I am having an issue with using ng-model in an input tag. I have set up a JSFiddle which contains my code. The issue occurs when you click "Add" and then try to change one of the input boxes below. The input refuses to let you type in it!

HTML:

<div ng-class="{selected: selectedPart==$index, cell: selectedPart!=$index}" 
     ng-click="selectPart($index)" ng-repeat="part in parts">
        <textarea class="prompt" ng-model='part.wording'></textarea>
        <hr>
        <span class="numbering" ng-repeat="option in part.options">
            {{ $index+1 }}).
            <textarea class="option" ng-model="option"></textarea>
            <br>
        </span>
</div>

JS:

StaticEX.controller('mainController', function($scope) {
    $scope.parts = [];
    $scope.ps = "Problem Statement";
    $scope.selectedPart = null;


    $scope.newPart = function() {
        return {"wording": "Prompt",
                "options": ["", "", "", ""]}
    };

    $scope.addPart = function() {
        $scope.parts.push($scope.newPart());
    };

Is this an issue with how I am referring to "option"? Is this a pseudo-variable that is created for the "ng-repeat" directive and isn't actually linked to "$scope"? Or am I doing something profoundly stupid?

4

3 回答 3

1

至于处理Duplicates in a repeater are not allowed1.1.5，有一个简单的修复。几周前切换到 1.1.5 时，我遇到了同样的问题。

track by $ index需要作为表达的一部分ng-repeat

<span class="numbering" ng-repeat="option in part.options track by $index">
   {{ $index+1 }}).
   <textarea class="option" ng-model="option"></textarea>
   <br>
</span>

您可以在此博客、GitHub或Angular Google Group上阅读有关此问题的一些信息。

于 2013-08-06T19:32:49.787 回答
0

如果你改变

<input class="option" ng-model="option">

至

<input class="option" ng-model="part.options[$index]">

它似乎有效，但现在你在焦点改变方面遇到了问题。

于 2013-08-06T18:51:49.127 回答
0

有时 Angular 无法绑定到非对象。所以快速的解决方案是让你的选项对象。：

$scope.newPart = function() {
    return {"wording": "Prompt",
            "options": [{text:""}, {text:""}, {text:""}, {text:""}]}
};

接着

<input class="option" ng-model="option.text">

我认为这个特定问题在以后的版本中得到了解决，所以用最新版本的 angular 试试，如果它仍然不起作用，我会在 github 上为它提交一个问题。

于 2013-08-06T18:46:16.007 回答