다른 드롭 다운 목록에서 선택한 값에 따라 Angularjs 필터 드롭 다운 목록

Question

다음과 같은 기능을 구현하고 싶습니다.

1 개의 입력 필드와 2 개의 드롭 다운 목록이 있다고 가정 해보십시오. 입력 필드에서 전자 메일 주소를 채울 수 있으며 다음 옆에있는 이메일이있는 종류의 유형을 선택할 수 있습니다 (개인, 전문가, 기타 또는 아무것도).

이제 세 번째 드롭 다운 목록에서 선택한 전자 메일 주소를 선택할 수있는 전자 메일 목록이 표시됩니다.

그래서 무엇이 일어날까요?

1) 입력 필드에 아무 것도 없으면 기본 전자 메일 드롭 다운 목록이 비어 있습니다 (이것은 이미 사례)입니다.

2) 전자 메일이 채워지고 유형이있는 경우 기본 전자 메일 드롭 다운 목록은 다음 값을 포함해야합니다. 예를 들어, test@test.com (개인) .

3) 전자 메일이 채워 지지만 유형이없는 경우 기본 전자 메일 드롭 다운 목록은 다음과 같이 다음 값을 포함해야합니다. 예를 들어 유형 없이는 다음과 같이 test@test.com " .

html :

<div ng-repeat="email in contactInfo.emails">
    <input id="email" type="text" ng-model="email.email"/>
    <select id="emailType" ng-model="email.emailTypeId" ng-options="emailType.id as emailType.name for emailType in emailTypes">
        <option value="">Choose...</option>
    </select>
</div>

<br/><br/>

<label>Preferred e-mail:</label>
<select style="margin-left: 20px; width: 50%;" id="preferred-email" ng-model="contactInfo.preferredEmail" ng-options="email.email for email in (contactInfo.emails | filter:filterEmail) track by email.id">
    <option value="">Choose...</option>
</select>

.

자바 스크립트 :

function MyCtrl($scope){
    $scope.contactInfo = {};
    $scope.emailTypes = [{"label":"Personal","id":1,"name":"Personal","rank":2},{"label":"Professional","id":2,"name":"Professional","rank":2},{"label":"Other","id":3,"name":"Other","rank":4}];

    $scope.contactInfo.emails = [{"id":1100, "emailTypeId":2,"email":"member@test.com"}, {"id":1200, "emailTypeId":1,"email":"member2@test.com"}];
    $scope.contactInfo.prefferedEmail = {};

    $scope.filterEmail = function(email){
        return (email.email);
    }
}

.

JSFiddle :

여기 는 바이올린이지만 첫 번째는 작동 중입니다.

나는 개미 단서가 없으므로 누군가가 나를 도울 수 있다면 좋을 것입니다. 당신의 시간에 감사드립니다.

sven.

Answer 1

여기 샘플 구현 - relins.nofollow"> http://jsfiddle.net/iamgururaj/t7fkh/5/

코드 :

<select style="margin-left: 20px; width: 50%;" id="preferred-email" ng-model="contactInfo.preferredEmail" ng-options="getEmail(email) for email in (contactInfo.emails | filter:filterEmail) track by email.id">
    <option value="">Choose...</option>
</select>

.

js :

$scope.contactInfo = {
        emails: [{
            "id": 1100,
                "emailTypeId": "2",
                "email": "1@test.com"
        }, {
            "id": 1200,
                "emailTypeId": "1",
                "email": "2@test.com"
        }]
    };
    $scope.emailTypes = {
        "1": "Personal",
            "2": "Professional",
            "3": "Other"
    };
    $scope.filterEmail = function (email) {
        return (email.email);
    }

    $scope.getEmail = function (email) {
        if (email.emailTypeId) {
            return email.email + ' (' + $scope.emailTypes[email.emailTypeId] + ')';
        }
        return email.email;
    }

.