Fatal编程技术网
  • javascript/
  • Javascript angularjs multiselect：单击将表单输入保存到变量

Javascript angularjs multiselect：单击将表单输入保存到变量

javascript angularjs

Javascript angularjs multiselect：单击将表单输入保存到变量,javascript,angularjs,angular-chosen,Javascript,Angularjs,Angular Chosen,我一直在按照中的说明制作我自己的mulitselect可搜索下拉菜单，带有angular和Selected 我想知道是否有人能帮我找出如何将选择保存到一个变量，这样我就可以将它从客户端发送到服务器端，并将其用作python脚本的输入。最好是，我想在点击时这样做。我加了一个假按钮 我可以从html中访问ng模型值，但不能在应用程序/控制器中访问 index.html 问题似乎是库版本不兼容。您发布的视频来自2012年，当时Angular已回到v1.0.1。回顾过去，您可以看到，他们已将其更改为使用

我一直在按照中的说明制作我自己的mulitselect可搜索下拉菜单，带有angular和Selected

我想知道是否有人能帮我找出如何将选择保存到一个变量，这样我就可以将它从客户端发送到服务器端，并将其用作python脚本的输入。最好是，我想在点击时这样做。我加了一个假按钮

我可以从html中访问ng模型值，但不能在应用程序/控制器中访问

index.html
问题似乎是库版本不兼容。您发布的视频来自2012年，当时Angular已回到v1.0.1。回顾过去，您可以看到，他们已将其更改为使用CDN，如下所示：

<head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="chosen@1.0.0" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
    <script data-require="chosen@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
    <script data-require="chosen@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    <script data-require="angular.js@1.3.0-beta.19" data-semver="1.3.0-beta.19" src="https://code.angularjs.org/1.3.0-beta.19/angular.js"></script>
    <link rel="stylesheet" href="style/style.css" />
    <script src="js/app.js"></script>
</head>
因此，请尝试更改您正在使用的库的版本，然后您应该开始看到控制器中正确填充的
$scope.recipients
变量

注意：您不必专门使用这些版本，我只是指出，这是库版本的组合，确实有效

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


app.directive('chosen', function() {
    var linker = function(scope,element,attr) {
        scope.$watch('jumpersList',function() {
            element.trigger("chosen:updated");
        })
        element.chosen();
    };

    return {
        restrict:'A',
        link: linker
    }
})


app.controller('JumpersController', function($scope,$http) {
    $scope.url = 'master_dict.json';
    $scope.jumpersList = [];

    $scope.fetchJumpers = function() {
        $http.get($scope.url).then(function(result){
            $scope.jumpersList = result.data;
        });
    }

    $scope.fetchJumpers();



    })

<head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="chosen@1.0.0" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
    <script data-require="chosen@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
    <script data-require="chosen@1.0.0" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    <script data-require="angular.js@1.3.0-beta.19" data-semver="1.3.0-beta.19" src="https://code.angularjs.org/1.3.0-beta.19/angular.js"></script>
    <link rel="stylesheet" href="style/style.css" />
    <script src="js/app.js"></script>
</head>