Question

我一直按照this video中的说明制作我自己的多选搜索下拉菜单，其中包含角度和选择。

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

我可以从html中访问ng-model值，但不能在app / controller中访问。

的index.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();



    })

Answer 1

问题似乎是库版本不兼容。您发布的视频是2012年Angular重返v1.0.1时的视频。回顾simpulton's directive on 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变量。

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

angularjs multiselect：点击

的index.html

1 个答案: