使用相同模型进行角度嵌套ng-repeat

时间:2016-07-27 19:43:46

标签: javascript angularjs angularjs-ng-repeat ng-repeat

我真的不知道如何描述这种情况,但这是我的HTML:

<tr ng-repeat="dataEntry in data.tests track by $index" ng-init="rowIndex = $index">
    <!--DELETE BUTTON-->
    <td style="vertical-align:middle;">
        <button type="button" class="btn btn-xs btn-danger" title="{{data.textz.deleteTitle}}"
                ng-click="deleteTest(rowIndex)"
                ng-show="data.tests.length > 1">
            &#215;
        </button>
    </td>
    <!--QUESTION DROPDOWN-->
    <td style="vertical-align:middle">
        <select class="form-control" style="width:100%"
                ng-model="dataEntry.question"
                ng-options="question.id group by question.group for question in data.validQuestions"
                ng-change="clearValue(rowIndex)"></select>
    </td>
    <!--CONDITION DROPDOWN-->
    <td style="vertical-align:middle">
        <p ng-show="dataEntry.question == null" ng-bind-html="data.textz.Step2NeedsAttention"></p>
        <select class="form-control" style="width:100%"
                ng-show="dataEntry.question != null"
                ng-model="dataEntry.condition"
                ng-change="clearExpression()"
                ng-options="option.value for option in conditions | filter:{dataType:dataEntry.question.dataTypeExplicit}"></select>
    </td>
    <!--VALUE SELECTION/ENTRY-->
    <td style="vertical-align:middle;">
        <p ng-show="dataEntry.condition == null" ng-bind-html="data.textz.Step3NeedsAttention"></p>
        <!--OPEN ENDS-->
        <input type="text" class="form-control"
               ng-show="dataEntry.condition != null &amp;&amp; dataEntry.question.dataTypeExplicit == 'open'"
               ng-change="selectedAnswer(rowIndex)"
               ng-model="dataEntry.oeValue">
        </input>
        <!--NUMERIC-->
        <input type="number" class="form-control" step="0.01"
               ng-show="dataEntry.condition != null &amp;&amp; dataEntry.question.dataTypeExplicit == 'numeric'"
               ng-change="selectedAnswer(rowIndex)"
               ng-model="dataEntry.oeValue">
        </input>
        <!--SINGLE PUNCH-->
        <div style="max-height:100px;overflow: auto" ng-show="dataEntry.condition != null &amp;&amp; dataEntry.question.dataTypeExplicit == 'categorical-sp'">
            <div class="checkbox" ng-repeat="option in dataEntry.question.responses">
                <label>
                    <input type="checkbox" ng-model="option.selected" ng-change="selectedCheckbox(rowIndex, dataEntry.question)" />
                    {{option.title}}
                </label>
            </div>
        </div>
        <!--MULTI PUNCH-->
        <div style="max-height:100px;overflow: auto" ng-show="dataEntry.condition != null &amp;&amp; dataEntry.question.dataTypeExplicit == 'categorical-mp'">
            <div class="checkbox" ng-repeat="option in dataEntry.question.responses">
                <label>
                    <input type="checkbox" ng-model="option.selected" ng-change="selectedCheckbox(rowIndex, dataEntry.question)" />
                    {{option.title}}
                </label>
            </div>
        </div>
    </td>
    <td style="vertical-align:middle">
        <span ng-show="!isEmptyNullUndefined(dataEntry.operator)">{{dataEntry.operator | uppercase}}</span>
        <button type="button" class="btn" style="pointer-events:auto"
                ng-class="dataEntry.operator == 'and' ? 'btn-success' : 'btn-primary'"
                ng-click="addTest($index,'and')"
                ng-disabled="dataEntry.hasValue == false"
                ng-show="dataEntry.operator == null"
                ng-bind-html="data.textz.andButton"></button>
        <button type="button" class="btn btn-primary" style="pointer-events:auto"
                ng-class="dataEntry.operator == 'or' ? 'btn-success' : 'btn-primary'"
                ng-click="addTest($index,'or')"
                ng-disabled="dataEntry.hasValue == false"
                ng-show="dataEntry.operator == null"
                ng-bind-html="data.textz.orButton"></button>
        <button type="button" class="btn btn-primary" style="pointer-events:auto"
                ng-click="previewTests()"
                ng-show="$index == data.tests.length - 1"
                ng-disabled="dataEntry.hasValue == false"
                ng-bind-html="data.textz.applyButton"></button>
    </td>
</tr>

我的data.tests示例可能如下所示:

[
  {
    "question": {
      "id": "screener2",
      "title": "Test Question 2",
      "dataTypeExplicit": "categorical-mp",
      "group": "Screener",
      "responses": [
        {
          "id": "screener2_1",
          "title": "Answer 1",
          "selected": true
        },
        {
          "id": "screener2_2",
          "title": "Answer 2",
          "selected": false
        }
      ]
    },
    "condition": {
      "name": "anyOfTheseMP",
      "value": "Any of these",
      "expression": "ContainsAny({question},{{value}})",
      "dataType": "categorical-mp",
      "questionWording": "ASKED IF {value} CODED AT {question}",
      "delimiterReplacement": " OR "
    },
    "oeValue": null,
    "spValue": null,
    "mpValue": [
      {
        "id": "screener2_1",
        "title": "Answer 1",
        "selected": true
      }
    ],
    "hasValue": true,
    "operator": "and"
  },
  {
    "question": {
      "id": "sex",
      "title": "Are you...?",
      "dataTypeExplicit": "categorical-sp",
      "group": "Screener",
      "responses": [
        {
          "id": "Male",
          "title": "Male",
          "selected": true
        },
        {
          "id": "Female",
          "title": "Female",
          "selected": false
        }
      ]
    },
    "condition": {
      "name": "anyOfTheseSP",
      "value": "Any of these",
      "expression": "ContainsAny({question},{{value}})",
      "dataType": "categorical-sp",
      "questionWording": "ASKED IF {value} CODED AT {question}",
      "delimiterReplacement": " OR "
    },
    "oeValue": null,
    "spValue": [
      {
        "id": "Male",
        "title": "Male",
        "selected": true
      }
    ],
    "mpValue": null,
    "hasValue": true
  }
]

这里的问题是,如果我添加一个新的空测试,然后选择相同的问题和任何条件,一行的响应将绑定到另一行。这是我正在谈论的截图: enter image description here

如果我在一行中选择任何答案,则另一行更新为相同的答案。任何人对我如何解决这个问题都有任何想法?

编辑:添加向数组添加空测试的相关代码。

$scope.emptyTest = {
    question: null,
    condition: null,
    oeValue: null,
    spValue: null,
    mpValue: null,
    hasValue: false
};


$scope.addTest = function(nDex,operator){
    $scope.data.tests[nDex].operator = operator;
    $scope.data.tests.push(angular.copy($scope.emptyTest));
    $scope.clearExpression();
};

0 个答案:

没有答案