AngularJS select 组件的指令

Question

我正在尝试为我将在系统不同位置多次使用的组件创建一个 AngularJS 指令。

这是一个简单的例子，说明我现在遇到的问题

<!DOCTYPE html>
<html lang="en" >
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js" type="text/javascript"></script>
    </head>
    <body ng-app="app" ng-controller="appController">

        <div stk-customer></div>

        <div>
            <select-pais id="selectPais1" lista="listaPais" opcao="participante.idPais"/>
        </div>

        <br />

        <div>
            <select-pais id='selectPais2' lista='listaPais' opcao="participante.idNacionalidade"/>
        </div>

        <br />
        <div>
            <select-sim-nao id='selectSimNao' lista='listaSimNao' opcao='participante.temDinheiro' />
        </div>

    </body>

    <script type="text/javascript">
        var app = angular.module('app', []);

        app.controller('appController', ['$scope', function($scope) {

            var vm = $scope;

            vm.participante = {
                'idPais' : '04',
                'idNacionalidade': '02',
                'temDinheiro': 'Não'
            },

            vm.listaPais = [
                {'id' : '01', 'pais' : 'Argentina'},
                {'id' : '02', 'pais' : 'Uruguai'},
                {'id' : '03', 'pais' : 'Paraguai'},
                {'id' : '04', 'pais' : 'Brasil'},
                {'id' : '05', 'pais' : 'Estados Unidos'},
                {'id' : '06', 'pais' : 'Canadá'}
            ],

            vm.listaSimNao = [
                'Sim',
                'Não'
            ]

        }]);

        app.directive('selectPais', function() {
            return {
                restrict: 'E',
                scope: {
                    listaPais: '=lista',
                    opcao: '='
                },
                template: '<select ng-options="item.pais for item in listaPais track by item.id" ng-model="opcao" required="required">' +
                        '<option value=""></option>' +
                    '</select>' + 
                    '<div>{{opcao}}</div>'
            }
        });

        app.directive('selectSimNao', function() {
            return {
                restrict: 'E',
                scope: {
                    listaSimNao: '=lista',
                    opcao: '='
                },
                template: '<select ng-options="item as item for item in listaSimNao" ng-model="opcao" required="required">' +
                        '<option value=""></option>' +
                    '</select>' +
                    '<div>{{opcao}}</div>'
            }
        });

    </script>
</html>

我需要能够将对象参与者的不同 ID 绑定到我的指令 "select-pais" 并使其 select 成为正确的国家/地区，但不知道如何使其工作。

我是 AngularJs 的新手，很多事情对我来说都很陌生。

提前感谢您的帮助！

Answer 1

您需要一个对象，因为您是按 ID 选择的，所以您必须有 {id: 'idFromParticipante'}

如Angularjs所述 API:

Another solution is to use a track by clause, because then ngOptions will track the identity of the item not by reference, but by the result of the track by expression. For example, if your collection items have an id property, you would track by item.id.

https://docs.angularjs.org/api/ng/directive/ngOptions#complex-models-objects-or-collections-

这是一个例子：

 var app = angular.module('app', []);

        app.controller('appController', ['$scope', function($scope) {

            var vm = $scope;

            vm.participante = {
                'idPais' : '04',
                'idNacionalidade': '02',
                'temDinheiro': 'Não'
            },

            vm.listaPais = [
                {'id' : '01', 'pais' : 'Argentina'},
                {'id' : '02', 'pais' : 'Uruguai'},
                {'id' : '03', 'pais' : 'Paraguai'},
                {'id' : '04', 'pais' : 'Brasil'},
                {'id' : '05', 'pais' : 'Estados Unidos'},
                {'id' : '06', 'pais' : 'Canadá'}
            ],

            vm.listaSimNao = [
                'Sim',
                'Não'
            ]

        }]);

        app.directive('selectPais', function() {
            return {
                restrict: 'E',
                scope: {
                    listaPais: '=lista',
                    opcao: '='
                },
                controller: function($scope){
                    $scope.selecionado = {id: $scope.opcao}
                },
                template: '<select ng-options="item.pais for item in listaPais track by item.id" ng-model="selecionado" required="required">' +
                        '<option value=""></option>' +
                    '</select>' + 
                    '<div>{{opcao}}</div>'
            }
        });

        app.directive('selectSimNao', function() {
            return {
                restrict: 'E',
                scope: {
                    listaSimNao: '=lista',
                    opcao: '='
                },
                template: '<select ng-options="item as item for item in listaSimNao" ng-model="opcao" required="required">' +
                        '<option value=""></option>' +
                    '</select>' +
                    '<div>{{opcao}}</div>'
            }
        });

<!DOCTYPE html>
<html lang="en" >
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js" type="text/javascript"></script>
    </head>
    <body ng-app="app" ng-controller="appController">

        <div stk-customer></div>

        <div>
            <select-pais id="selectPais1" lista="listaPais" opcao="participante.idPais"/>
        </div>

        <br />

        <div>
            <select-pais id='selectPais2' lista='listaPais' opcao="participante.idNacionalidade"/>
        </div>

        <br />
        <div>
            <select-sim-nao id='selectSimNao' lista='listaSimNao' opcao='participante.temDinheiro' />
        </div>

    </body>

Codepen link: https://codepen.io/anon/pen/QxmKQp?editors=1010

AngularJS select 组件的指令

AngularJS Directive for select component

angularjs

html-select

directive

ng-options