使用ng-repeat和索引进行文本框输入

时间:2017-11-07 07:33:01

标签: javascript jquery html angularjs

我试图在angularjs和mvc中使用ng-repeat和索引来设置问题/答案。所以对于我的数据库,我有两个表:

  1. 问题

    • 问题
    • InputType(文本框,复选框,广播等)
  2. 答案

    • 答案
  3. 问答表之间存在一对多的关系,因为对于一个问题,许多不同的人可以有很多答案。在我的angularjs中,我使用$ scope变量并获取方法从数据库中获取问题,使用ng-repeat重复div中的问题。这样做是这样的:

    //Question
    
     $scope.Question_NetSuite = {
       Question1: '',
       input_type: ''
     }
    
    //Answer:
    $scope.SysIntClient =
      {
        SysInt_ID: '',
        ID: '',
        Answer: ''
      }
    
    $http.get('/Home/getUserInfo')
      .then(function (response) {
        $scope.Question_NetSuite = response.data;
        console.log("status:" + response.status);
        console.log("data: " + $scope.Question_NetSuite);
      })
    

    我的div和html如下所示:

    <div class="row" ng-repeat="(index, question) in Question_NetSuite">
      Value: {{question.Question1}} 
      {{ index }}
      <div class="col-lg-6">
        <label class="labelQuestion" id="question_label" for="question_answer">
          {{question.Question1}}
        </label>
      </div>
      //This seems to be where I am struggling
      <input type="text" ng-model="SysIntClient.Answer" />
      Value: {{SysIntClient.Answer}}
    </div>
    

    我遇到的问题是我想将文本框中的答案输入链接到我从数据库中获取的问题。我是angularjs和mvc的新手,所以我知道我需要使用转发器,我需要将答案分配给与问题相同的索引。我只是不知道该怎么做。

    您如何建议我将问题与答案联系起来?

1 个答案:

答案 0 :(得分:0)

使用索引是一个坏主意。您需要在问题数组中传递问题ID以及每个答案对象的问题ID。像这样:

$scope.questionsList = [
   {
      "id": 1,
      "name": "My first question"
   },
   {
      "id": 2,
      "name": "My second question"
   }
]


$scope.answersList = {
  "1": [   // question ID
    {
       "id": 1,
       "answer": "First answer for question id 1"
    },
    {
       "id": 2,
       "answer": "Second answer for question id 1"
    }
  ],
  "2": [  // question ID
    {
       "id": 1,
       "answer": "First answer for question id 2"
    }
  ]
} 

重复questionList,然后通过answersList查找当前的question.id:

<div ng-repeat="question in questionsList">
  [{{question.id}}]: {{question.name}}
  <ul>
    <li ng-repeat="answer in answersList[question.id]">
      [{{answer.id}}]: {{answer.answer}}
    </li>     
  </ul>      
</div>

这是一个有效的傻瓜:http://jsfiddle.net/0pafvrhu/