2017-11-08 1 views
-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> 

Fiddle Link for issue 그리고 내 각 컨트롤러 내 응용 프로그램에서

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.

나는 많은 성공없이 바이올린의 문제를 다시 시도했지만 난 그냥 질문] 배열에 바인딩 추천 복잡성을 피할 것이다 당신에게 내가

답변

1

을하려고하고 무엇을 모든 이해를 제공 할 것입니다 생각 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>

+0

감사 :

여기 단순화, 작업 버전입니다. 필자의 바이올린 신청에서이 문제를 에뮬레이트하는 데 나는 성공적이지 못했다는 것에 동의한다. 내가 필요로하는 누구나는 선로 이었어도. 나는 모든 단계가 새로운 발견이기 때문에 각도에 익숙하지 않다. 나는 몇 가지 예를 들어 보았지만 그 중요성을 고려하지 않았다. 내가 한 모든 작업은 트랙을 추가하고 완벽하게 작동하는 것입니다. 감사합니다. – DotNetBeginner

+0

@DotNetBeginner - 여러분 안녕하세요. – jbrown

관련 문제