Javascript 从三个选择中检索值
我是AngularJS新手,我一直在将php应用程序与AngularJS集成。 最近我尝试从三个选择中获取值 我在plunker编辑器上创建了两个文件作为示例 选择如下:Javascript 从三个选择中检索值,javascript,angularjs,select,ng-options,Javascript,Angularjs,Select,Ng Options,我是AngularJS新手,我一直在将php应用程序与AngularJS集成。 最近我尝试从三个选择中获取值 我在plunker编辑器上创建了两个文件作为示例 选择如下: 填充选择项的模块 angular.module('Programs',[]) .factory('proFactory',function(){ var selected_program = '0'; console.log('From proFactory'); })
填充选择项的模块
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];
});
我曾经尝试获取三个选择的值,以便将数据发送到另一个脚本,并在警报中显示它们,但我无法获取
我已经读到,在控制器之间共享数据是创建提供者的必要条件,在本例中,我使用了工厂
工厂有一个包含三个变量的对象,程序、周期和教师(最后两个被注释),还有两个函数,setValues
用于分配数据和“sayHello”用于测试工厂
我注释了一个代码行,该代码行使用工厂提供的函数sayHello
,因此工厂是可访问的
html中的按钮具有ng click=vals()
,该函数在mainController的$scope中,当我单击按钮时,我假装分配选择值并显示它们
我试图通过myFactory.setValues(myFactory.program)分配值代码>并以这种方式myFactory.setValues($scope.program)
但是$scope.program
在程序控制器的作用域中
对此有何评论或想法。
提前感谢 您需要三个控制器有什么原因吗?
三个控制器是不必要的麻烦,您只需要一个控制器就可以包含所有三个选择
这样,您就可以访问同一范围内的所有三个值,并将它们传递给工厂。我建议将所有变量(时段、教师、课程)也定义在一个范围内
前
<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>
编辑:
如果您确实需要使用工厂在作用域之间传递数据,您可以这样定义它:
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)谢谢benri
我找到了另一个使用$parent的解决方案
在这种情况下,页面有一个mainController
(来自myForm
模块),其中包含来自不同模块的三个控制器。
每个控制器的$scope
适用于每个控制器。我的意思是programsController中的$scope不能在periodscontroller中使用
解决办法是:
在ng模型中使用programsController
中的$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>
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; })
};
});
<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);
}
}]) ;