Мне нужно помещать каждый алфавит в каждый контейнер ответов, чтобы не добавлять новый контейнер ответов. См. Мой фрагмент. Как я могу это сделать?
var myApp = angular.module('myApp',['ngDragDrop']).controller('QuestionDetailsCtrl', function ($scope) {
//Scrabble word
$scope.ObjListAlphabet = [{alphabet: "J"},{alphabet: "L"},{alphabet: "W"},{alphabet: "E"},{alphabet: "B"},{alphabet: "A"},{alphabet: "T"},{alphabet: "U"}];
$scope.ObjAnswerList = [
{alphabet: ""},
{alphabet: ""},
{alphabet: ""},
{alphabet: ""},
{alphabet: ""},
{alphabet: ""}
];
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
.scrabble
{
display: inline !important;
text-align: center !important;
width:40px;
height:40px;
background-color:#ccc;
border:1px solid #ccc;
margin:2px;
float:left;
text-align:center;
padding-top:8px;
margin-right:10px;
}
.alphabet-scrabble
{
float: left;
color: white;
background-color: #3636ff;
margin: 2px;
width: 38px;
height: 38px;
padding: 8px 14px 8px 12px;
font-size: 1.3em;
cursor: pointer;
text-align: center;
}
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script>$('#widget').draggable();</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://pencil.my/assets/js/angular-dragdrop.js"></script>
<div ng-app="myApp" ng-controller="QuestionDetailsCtrl">
Rajah di bawah menunjukkan sebuah seterika elektrik.
<div class="text-center">
<img src="http://images.clipartpanda.com/iron-clipart-iron.gif" style="width:200px; margin-left:auto; margin-right:auto; transform:rotate(110deg); margin-top: 35px;" />
</div>
<br/>
Apakah bentuk tenaga yang dihasilkan oleh seterika elektrik di atas.
<br/>
<br/><br/>
Tenaga Elektrik <i class="ion-arrow-right-c"></i> Tenaga ________
<br/><br/>
{{ObjAnswerList}}
<br/>
<br/>
Answer Container:
<br/>
<div style="width:100%; text-align:center;">
<div class="scrabble" ng-repeat="ObjAnswer in ObjAnswerList" data-drop="true" data-jqyoui-options ng-model="ObjAnswerList" jqyoui-droppable>
{{ObjAnswer.alphabet}}
<div data-drag="true" data-jqyoui-options ng-model="ObjAnswerList" jqyoui-draggable ng-hide="!ObjAnswer.Ans">{{ObjAnswer.Ans}}</div>
</div>
</div>
<br/><br/><br/>
<hr/>
<div class="answer-alphabet">
<div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model ="ObjAlphabet" jqyoui-draggable="{animate:true}" ng-hide="!ObjAlphabet.alphabet" class="alphabet-scrabble" ng-repeat="ObjAlphabet in ObjListAlphabet">
{{ObjAlphabet.alphabet}}
</div>
</div>
</div>