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”并使其选择正确的国家，但不知道如何使其工作。

我是AngularJs的新手，很多事情对我来说很奇怪。

提前感谢您的帮助！

Answer 1

您需要一个对象，因为您正在按ID进行选择，因此您必须具有{id：'idFromParticipante'}

如Angularjs API中所述：

另一种解决方案是使用track by子句，因为ngOptions不会通过引用而是通过表达式的跟踪结果来跟踪项的标识。例如，如果您的收藏品具有id属性，则可以按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链接： https://codepen.io/anon/pen/QxmKQp?editors=1010

选择组件的AngularJS指令

1 个答案: