从三个选择中检索值
Retrieve the value from three selects
我是 AngularJS 的新手,我一直在将 php 应用程序与 angular 集成。
最近我正在尝试从三个选择中获取值。
我在plunker编辑器上做了两个文件作为例子
http://plnkr.co/edit/CA2D5RDvZeBQLnMUXFOH?p=preview
选择如下:
<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 是应用程序的主要模块
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];
});
我曾尝试获取三个选择的值,以便将数据发送到另一个脚本并在之前的警报中显示它们,但我无法获取。
我读到在控制器之间共享数据是创建提供者所必需的,在这种情况下我使用了工厂。
工厂有一个包含三个变量的对象,program、period 和 teacher(最后两个已注释),以及两个函数,setValues
用于分配数据,'sayHello' 用于测试工厂。
我注释了使用工厂函数 sayHello
的代码行,因此可以访问工厂。
html 中的按钮有 ng-click=vals()
并且该函数在 mainController 的 $scope 中,当我单击按钮时我假装分配选择的值并显示它们.
我曾尝试通过 myFactory.setValues(myFactory.program);
分配值,也以这种方式 myFactory.setValues($scope.program);
但 $scope.program
在 programsController
[=12= 的范围内]
对此有任何评论或想法。
提前致谢!!!
你需要三个控制器是有原因的吗?
三个控制器是不必要的麻烦,你只需要一个控制器就可以包含所有三个选择
这样您就可以访问同一范围内的所有三个值并将它们传递给工厂。我也建议在一个范围内定义所有变量(期间、教师、程序)。
前任
<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; })
};
});
工厂returns一组方法get/set你的变量(API)
谢谢本里。
我找到了另一个使用 $parent 的解决方案。
在这种情况下,页面有一个 mainController
(来自 myForm
模块),其中包含来自不同模块的三个控制器。
每个控制器的 $scope
是每个控制器的。我的意思是 programsController 中的 $scope 不能在 periodsControllers 中使用。
解决方法是:
在 programsController
的 ng-model 中使用 $parent.program,这样 angular 表示模型绑定到 mainController
[= 的 $scope.program
18=]
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);
}
}]) ;
我是 AngularJS 的新手,我一直在将 php 应用程序与 angular 集成。 最近我正在尝试从三个选择中获取值。
我在plunker编辑器上做了两个文件作为例子 http://plnkr.co/edit/CA2D5RDvZeBQLnMUXFOH?p=preview
选择如下:
<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 是应用程序的主要模块
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];
});
我曾尝试获取三个选择的值,以便将数据发送到另一个脚本并在之前的警报中显示它们,但我无法获取。
我读到在控制器之间共享数据是创建提供者所必需的,在这种情况下我使用了工厂。
工厂有一个包含三个变量的对象,program、period 和 teacher(最后两个已注释),以及两个函数,setValues
用于分配数据,'sayHello' 用于测试工厂。
我注释了使用工厂函数 sayHello
的代码行,因此可以访问工厂。
html 中的按钮有 ng-click=vals()
并且该函数在 mainController 的 $scope 中,当我单击按钮时我假装分配选择的值并显示它们.
我曾尝试通过 myFactory.setValues(myFactory.program);
分配值,也以这种方式 myFactory.setValues($scope.program);
但 $scope.program
在 programsController
[=12= 的范围内]
对此有任何评论或想法。 提前致谢!!!
你需要三个控制器是有原因的吗? 三个控制器是不必要的麻烦,你只需要一个控制器就可以包含所有三个选择
这样您就可以访问同一范围内的所有三个值并将它们传递给工厂。我也建议在一个范围内定义所有变量(期间、教师、程序)。
前任
<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; })
};
});
工厂returns一组方法get/set你的变量(API)
谢谢本里。
我找到了另一个使用 $parent 的解决方案。
在这种情况下,页面有一个 mainController
(来自 myForm
模块),其中包含来自不同模块的三个控制器。
每个控制器的 $scope
是每个控制器的。我的意思是 programsController 中的 $scope 不能在 periodsControllers 中使用。
解决方法是:
在 programsController
的 ng-model 中使用 $parent.program,这样 angular 表示模型绑定到 mainController
[= 的 $scope.program
18=]
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);
}
}]) ;