2015-01-09 1 views
0

저는 AngularJS에서 새로 왔으며 PHP 응용 프로그램을 각도로 통합했습니다. 최근 세 선택에서 값을 얻으려고합니다.세 개의 선택에서 값 가져 오기

<body ng-app="MyForm">

<!-- comment --> 
     <div ng-controller="programsController"> 
     <select name="program" id="program" ng-model="program" 
     ng-options="prog.name for prog in programs"> 
     </select> 
     program.name {{program.name}} 
     selected_program {{selected_program}} 
     </div> 

<!-- comment --> 
     <div ng-controller="periodsController"> 
     <select name="period" id="period" ng-model="period" 
     ng-options="period.name for period in periods"> 
     </select> 
     </div> 

<!-- comment --> 
     <div ng-controller="teacherController"> 
     <select name="teacher" id="teacher" ng-model="teacher" 
     ng-options="teacher.name for teacher in teachers"> 
     </select> 
     </div> 

     <button ng-click="vals()">Click</button> 

    </div> 

MyForm을 응용 프로그램

의 주요 모듈 :

나는 http://plnkr.co/edit/CA2D5RDvZeBQLnMUXFOH?p=preview

선택은 다음과 같습니다 예와 plunker 편집기에 두 개의 파일을 만든

angular.module('MyForm',['Programs','Periods','Teachers']) 
.factory('myFactory', function() { 
    console.log('Factory loaded'); 
    var course = { 
     program : 'no set', 
     setValues : function (program){ 
      course.program=program; 
      //course.period=period; 
      //course.teacher=teacher; 
     }, 
     sayHello : function(){ 
      alert('hello'); 
     } 
    } 
    //console.log(course); 
    return course; 
}) 

.controller('mainController',['$scope','myFactory',function($scope,myFactory){ 

    $scope.vals = function(){ 
     //myFactory.setValues(myFactory.program); 
//myFactory.sayHello(); 

     alert('The values are:' + 
      '\nProgram: ' + myFactory.program + 
      '\nProgram: ' + myFactory.period + 
      '\nProgram: ' + myFactory.teacher); 
    } 
}]) ; 

내가 전에 경고에 다른 스크립트로 데이터를 전송하고이를 보여주기 위해 세 가지 선택의 값을 얻기 위해 노력했다

angular.module('Programs',[]) 
    .factory('proFactory',function(){ 
     var selected_program = '0'; 
     console.log('From proFactory'); 
    }) 

    .controller('programsController',function($scope,myFactory){ 
     $scope.programs=[ 
     {ID:1 , name:'HTML'}, 
     {ID:2 , name: 'AngularJS'} 
     ]; 

     $scope.program = $scope.programs[0]; 
     //myFactory.setValues($scope.program.ID); 
}); 

angular.module('Periods',[]) 
    .controller('periodsController',function($scope){ 
    $scope.periods=[ 
     {ID:1 , name:'Jan-Feb'}, 
     {ID:2 , name: 'Mar-Apr'} 
     ]; 
    $scope.period = $scope.periods[0]; 
}); 

angular.module('Teachers',[]) 
    .controller('teacherController',function($scope){ 
    $scope.teachers=[ 
     {ID:1 , name:'Mark Smith'}, 
     {ID:2 , name: 'Joe Cliff'} 
     ]; 
    $scope.teacher = $scope.teachers[0]; 
}); 

선택을 채우기 모듈,하지만 난 그것을 얻을 couldnt한다.

컨트롤러간에 데이터를 공유하기 위해 필자는 공급자를 만드는 것이 필요하며이 경우에는 공장을 사용했습니다.

공장에는 프로그램, 기간 및 선생님 (마지막 두 개는 주석 처리 됨)이라는 변수와 데이터를 할당하는 setValues, 공장을 테스트하는 두 가지 변수가있는 개체가 있습니다.

나는 공장에서 sayHello 함수를 사용하는 코드 줄을 주석 처리 했으므로 공장에 액세스 할 수 있습니다.

html의 버튼은 ng-click=vals()이고 그 기능은 mainController의 $ scope에 있습니다. 버튼을 클릭하면 선택 값을 할당하고 보여줍니다.

나는 myFactory.setValues(myFactory.program);을 통해이 너무 myFactory.setValues($scope.program);의 값을 할당하려고했지만 $scope.program이의 programsController

어떤 의견이나 아이디어의 범위에있다. 미리 감사드립니다 !!!!

답변

0

감사합니다. benri.

$ parent를 사용하는 다른 해결책을 찾았습니다.

이 경우 페이지에 다른 모듈의 세 컨트롤러가 포함 된 mainController (myForm 모듈)이 있습니다. 모든 컨트롤러의 $scope은 각 컨트롤러 용입니다. programsController의 $ scope를 periodsControllers에서 사용할 수 없다는 의미입니다.

솔루션은 다음과 같습니다 가 programsController에서 NG-모델은 $ parent.program을 사용하여, 각이 방법은 모델이 mainController

에서 $scope.program에 바인더 제본되어 이렇게 말한다 HTML은 다음과 같습니다

<div ng-controller="programsController"> 
     <select name="program" id="program" ng-model="$parent.program" 
     ng-options="prog.name for prog in programs"> 
     </select> 
</div> 

및 컨트롤러 :

.controller('mainController',['$scope',function($scope){ 
    $scope.vals = function(){ 
     alert('The values are:' + 
      '\nProgram: ' + $scope.program.name); 
    } 
}]) ; 
0

세 개의 컨트롤러가 필요한 이유가 있습니까? 컨트롤러 세 개가 불필요합니다. 세 개의 선택을 모두 포함하는 컨트롤러가 하나만 필요합니다.

같은 방법으로 세 개의 값을 모두 액세스하여 공장에 전달할 수 있습니다. 하나의 범위에서 모든 변수 (기간, 교사, 프로그램)를 정의하는 것도 좋습니다.전

<body ng-app="MyForm"> 
    <div ng-controller="mainController"> 
     <select name="program" id="program" ng-model="program" 
     ng-options="prog.name for prog in programs"> 
     </select> 
     program.name {{program.name}} 
     selected_program {{selected_program}} 


     <select name="period" id="period" ng-model="period" 
     ng-options="period.name for period in periods"> 
     </select> 

     <select name="teacher" id="teacher" ng-model="teacher" 
     ng-options="teacher.name for teacher in teachers"> 
     </select> 


    <button ng-click="vals()">Click</button> 

    </div> 
</body> 

에와 JS의

angular.module('MyForm',['Programs']) 
.factory('myFactory', function() { 
    console.log('Factory loaded'); 
    var course = { 
     program : 'no set', 
     setValues : function (data){ 
      course.program=data.program; 
      course.period=data.period; 
      course.teacher=data.teacher; 
     }, 
     sayHello : function(){ 
      alert('hello'); 
     } 
    } 
    //console.log(course); 
    return course; 
}) 

.controller('mainController',['$scope','myFactory', 'proFactory',function($scope,myFactory,proFactory){ 

    $scope.vals = function(){ 
     myFactory.setValues({ 
      program: $scope.program, 
      period: $scope.period, 
      teacher: $scope.teacher 
     }); 

     alert('The values are:' + 
      '\nProgram: ' + $scope.program + 
      '\nProgram: ' + $scope.period + 
      '\nProgram: ' + $scope.teacher); 
    } 

    // to store in programs factory: 
    proFactory.set_program($scope.program); 

}]) ; 

편집 : 당신이 정말로 범위 사이에 데이터를 전달하는 공장을 사용해야하는 경우 , 당신은 이런 식으로 정의 것입니다 :

angular.module('Programs',[]) 
.factory('proFactory',function(){ 
    var selected_program = '0'; 

    return { 
     set_program: (function(program){ selected_program = program; }), 
     get_program: (function(){ return selected_program; }) 
    }; 
}); 

팩토리는 변수 (API)를 가져 오거나 설정하는 메소드 세트를 반환합니다