我真的不知道如何描述这种情况,但这是我的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">
×
</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 && 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 && 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 && 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 && 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
}
]
这里的问题是,如果我添加一个新的空测试,然后选择相同的问题和任何条件,一行的响应将绑定到另一行。这是我正在谈论的截图:
如果我在一行中选择任何答案,则另一行更新为相同的答案。任何人对我如何解决这个问题都有任何想法?
编辑:添加向数组添加空测试的相关代码。
$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();
};