データを設定しようとすると、角度jsで選択する選択されたオプション

-1

私のアプリケーションでは、オプションでバインドし、ユーザーがページの読み込み時に保存されたデータを選択しました。私のアプリケーションでデータを設定しようとすると、角度jsで選択する選択されたオプション

<div ng-app ng-controller="QuestionController"> 
    <ul ng-repeat="question in Questions"> 
    <li> 
    <div>{{question.Text}}</div> 
    <select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options"> 
    </select> 
    <select ng-model="OptSelected" ng-options="option for option in question.Options"> 

    </li> 
    </ul> 
</div>

そして、私の角度コントローラで

function QuestionController($scope) { 
    $scope.Answers = {}; 

$scope.Questions = [{ "Text": "Gender?", "Name": "GenderQuestion", 
"Options": [{1,"Male"}, {2,"Female"}], 
"OptSelected": [{1,"Male"}]},{ "Text": "Favorite color?","Name": "ColorQuestion", 
"Options": [{1,"Red"}, {2, "Blue"}, { 3,"Green"}],"OptSelected": [{ 2, "Blue"}] }]; 

angular.forEach($scope.Questions, function(q) { 
    var propModel = "Answers['" + q.Name + "']"; 

    $scope[propModel] = q.OptSelected; 
})

私が選択した結合データに成功したが、私は、ユーザが選択する保存された値を設定しcanot。

私は多くの成功なしでフィドルの問題を再作成しようとしたが、私はちょうど質問配列への結合をお勧めしますと複雑さを避けるだろう、それはあなたに私が

出典

2017-11-08 DotNetBeginner

を行うにしようとしています何のすべてのより良い理解を提供すると思いますAnswers配列の対応する質問にバインドしようとしています。質問アレイから必要なものを抽出するには、選択が行われた後に、またはコントローラー・レベルの操作によってすべてをまとめてください。

あなたの問題の一部は、オブジェクトの配列が整っていないということです。あなたの答えのための

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

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

 
    $scope.Questions = [{ 
 
    Text: "Gender?", 
 
    Name: "GenderQuestion", 
 
    Options: [{ 
 
     id: 1, 
 
     desc: "Male" 
 
    }, { 
 
     id: 2, 
 
     desc: "Female" 
 
    }], 
 
    OptSelected: { 
 
     id: 1, 
 
     desc: "Male" 
 
    } 
 
    }, { 
 
    Text: "Favorite color?", 
 
    Name: "ColorQuestion", 
 
    Options: [{ 
 
     id: 1, 
 
     desc: "Red" 
 
    }, { 
 
     id: 2, 
 
     desc: "Blue" 
 
    }, { 
 
     id: 3, 
 
     desc: "Green" 
 
    }], 
 
    OptSelected: { 
 
     id: 2, 
 
     desc: "Blue" 
 
    } 
 
    }]; 
 

 
});

<html ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
</head> 
 

 
<div ng-controller="QuestionController"> 
 
    <ul ng-repeat="question in Questions"> 
 
    <li> 
 
     <div>{{question.Text}}</div> 
 
     <select ng-model="question.OptSelected" ng-options="option as option.desc for option in question.Options track by option.id"> 
 
     </select> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
</html>

出典

2017-11-08 20:19:05 jbrown

感謝：

はここで単純化され、作業バージョンです。私は、私がフィドルで自分のアプリケーションで問題をエミュレートすることには大成功を収めていないことに同意します。私が必要としたのはトラックだけでした。私は角度がないので、すべてのステップが新しい発見です。私はいくつかの例でトラックを見たが、その重要性は考慮しなかった。よく私がやったのはトラックを追加することでした。それは完璧に働いています。ありがとう – DotNetBeginner

@DotNetBeginner - どうぞよろしくお願いします。 – jbrown

データを設定しようとすると、角度jsで選択する選択されたオプション

答えて

関連する問題