首页 文章

Ionic Angular 指令更新无线电场

提问于
浏览 次
2

我在离子应用程序中设置了一个单选按钮，代表一组测试问题的答案。

控制器：

$scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
    id: 22,
    answer: "New York"
   },
   {
    id: 23,
    answer: "Los Angeles"
  }
]};

这在 HTML 中：

<ion-radio ng-repeat="answer in question.answers"
             ng-value="answer.id"
             ng-model="answerData.selectedAnswer"
            class="radio-positive">
    {{ answer.answer }}
  <div class="radio-right">{{some_scope_value[answer.id]}}</div>
  </ion-radio>

假设问题是“加利福尼亚州的哪个城市”，我想突出显示那个“正确”的无线电选择如果被选中的话。如果选择其中一个，我希望将其标记为“错误”并将正确答案标记为“答案”。这些应位于右侧和同一行，使用此 div：

<div class="radio-right">{{Correct!" || "Wong" || "Answer}}{{some_scope_value[answer.id]}}</div>

我的问题是：这需要一个指令来访问“some_scope_value [7]”??我意识到[8]括号不合法。我只是为了说明基于 answer.id 访问该字段的概念。

**更新：**因此，如果用户选择“芝加哥”或“纽约”，则“错误”一词应显示在“芝加哥”或“纽约”旁边，和“这是正确答案“应该显示在”洛杉矶“旁边。

但如果使用选择“洛杉矶”，那么“正确！”应显示在“洛杉矶”旁边，其他两行不应显示任何其他内容。

此外，这应该都是在按钮点击时发生，而不是在回答选择上(因此用户可以在提交答案之前改变主意)。

angularjs angularjs-directive ionic-framework

2 回答

  • 1

    不，你不需要指令来完成这项工作.

    为此，您可以通过不使用索引(array/objects)来简化答案结果处理。您可以使用ng-class，ng-show或ng-if来查看正确的答案。

    调节器

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

   $scope.selectedValue = {
      answer: ''
    };

  $scope.questions = {
    answers: [{
        id: 21,
        answer: "Chicago"
      }, {
        id: 22,
        answer: "New York"
      }, {
        id: 23,
        answer: "Los Angeles"
      }
    ]
  };
});

    视图

    <div ng-repeat="question in questions.answers">
          <label>
          <input type="radio" ng-model="selectedValue.answer" value="{{ question.answer }}">
          {{ question.answer }}
    
          </label>
      </div>

      <p>{{ selectedValue.answer }}</p>
      <p ng-show="selectedValue.answer === 'Chicago'"> Right answer!!! </p>
      <p ng-show="selectedValue.answer !== 'Chicago'"> Wrong answer!!! </p>
</div>

    这里还有一个吸食者plunker。

    不同的数组处理

    如果您真的想在$scope.questions.answers中搜索id，我应该使用lodash。

    var indexFoundById= lodash.findIndex($scope.questions.answers, function (chr) {
      return chr.id== selectedId;
});

//result handling
console.log($scope.questions.answers[indexFoundById].answer); //Chicago

    对象的不同处理 - Plunker Demo

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

   $scope.selectedValue = {
      answerId: null
    };

  $scope.questions = {
    answers: {
      21 :{
        right: true,
        answer: "Chicago"
      }, 
      22: {
        right: false,
        answer: "New York"
      }, 
      23 :{
        right: false,
        answer: "Los Angeles"
      }
    }
  };
});

    视图

    <div ng-repeat="(questionId, question) in questions.answers">
    <label>
      <input type="radio" ng-model="selectedValue.answerId" value="{{ questionId }}"> {{ question.answer }}
      <span style="color:green;" ng-show="questionId === selectedValue.answerId && questions.answers[selectedValue.answerId].right === true"> Right answer!!! </span>
      <span style="color:red;" ng-show="questionId === selectedValue.answerId && questions.answers[selectedValue.answerId].right !== true"> Wrong answer!!! </span>
      
    
    </label>
  </div>
    回复于
  • 0

    你不需要指令。你可以这样做：

    控制器：

    $scope.question = {
 answers: [
   {
     id:  21,
     answer: "Chicago"
   },
   {
     id: 22,
     answer: "New York"
   },
   {
     id: 23,
     answer: "Los Angeles"
   },
 correct_id: 21    
]};

    视图：

    <ion-radio ng-repeat="answer in question.answers"
         ng-value="answer.id"
         ng-model="answerData.selectedAnswer"
        class="radio-positive">
{{ answer.answer }}
<div class="radio-right" ng-show="answerData.selectedAnswer == question.correct_id">Right!</div>
</ion-radio>
    回复于

相关问题