angularjs multiselect: сохранение ввода формы в переменную по щелчку

Я следовал инструкциям в этом видео, чтобы сделать свой собственный mulitselect с возможностью поиска выпадающего меню с angular и chosen.

Мне было интересно, может ли кто-нибудь помочь мне выяснить, как сохранить выбор в переменную, чтобы я мог затем отправить его со стороны клиента на сторону сервера и использовать его в качестве входных данных для скрипта python. Желательно, я хотел бы сделать это на щелчок. Я добавил фиктивную кнопку …

I can access ng-model values from within the html, but not in the app/the controller.

индекс.формат 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>

приложение.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();



    })

1 ответ

  1. Проблема, по-видимому, несовместимые версии библиотеки. Видео вы опубликовали с 2012 года, когда Angular вернулся на v1.0.1. Оглядываясь на директиву simpulton по github , вы можете увидеть, что они изменили ее на использование CDNs следующим образом:

    <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переменную, правильно заполненную в контроллере.

    Примечание: вам не нужно использовать эти версии специально, я просто указываю, что это комбинация версий библиотеки, которая работает.