从三个选择中检索值答案

【问题标题】：Retrieve the value from three selects从三个选择中检索值
【发布时间】：2015-03-07 08:42:22
【问题描述】：

我是 AngularJS 的新手，我一直在用 angular 集成一个 php 应用程序。最近我正在尝试从三个选择中获取值。

我在 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 的范围内

对此的任何评论或想法。提前谢谢！！！！

【问题讨论】：

标签： javascript angularjs select ng-options

【解决方案1】：

谢谢本里。

我找到了另一个使用 $parent 的解决方案。

在这种情况下，页面有一个mainController（来自myFormmodule），其中包含来自不同模块的三个控制器。每个控制器的$scope 是针对每个控制器的。我的意思是，programsController 中的 $scope 不能在 periodControllers 中使用。

解决办法是：在 programsController 的 ng-model 中使用 $parent.program，这样 Angular 表示模型绑定到来自 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);
    }
}]) ;

【讨论】：

【解决方案2】：

您需要三个控制器有什么原因吗？三个控制器是不必要的麻烦，你只需要一个控制器来包含所有三个选择

这样您就可以访问同一范围内的所有三个值并将它们传递给工厂。我建议您也将所有变量（期间、教师、程序）定义在一个范围内。

前任

<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）

【讨论】：