0

我一直按照这个视频中的说明制作我自己的带有角度和选择的多选搜索下拉菜单。

我想知道是否有人可以帮助我弄清楚如何将选择保存到变量中，以便我可以将其从客户端发送到服务器端并将其用作 python 脚本的输入。最好，我想在点击时做到这一点。我添加了一个虚拟按钮...

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

索引.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Choose</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="chosen.min.css">
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <style type="text/css">
    .span4 {
    width: 300px;
    }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="chosen.jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script type="text/javascript" src="js/the_app.js"></script>
</head>

<body>

    <form action="#" class="container" ng-controller="JumpersController">
      <h1>Choose:</h1>
      <select data-placeholder="Choose" multiple class="span4 chzn-select" chosen ng-model="recipients" ng-options="recipient.name for recipient in jumpersList"></select>
      <p ng-repeat="recipient in recipients">{{recipient.name}}</p>
      <input type="button" ng-click="" value="Gimme!"></input>

    </form>
  </body>
  
</html>

the_app.js

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();



    })
4

1 回答 1

0

问题似乎是不兼容的库版本。您发布的视频是 2012 年 Angular 回到 v1.0.1 时的视频。回顾simpulton 在 github 上的指令，您可以看到他们已将其更改为使用 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控制器中正确填充了变量。

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

于 2017-01-15T11:41:45.080 回答