1

ここGitHubにあるAngularJS ui-selectで動作する選択HTMLコントロールを取得しようとしています。何らかの理由で、$scope 構文を使用するとアイテムを選択できますが、Controller As 構文を使用すると選択できません。構文として Controller を操作しようとしているプラ​​ンカーはhereにあります。$scope 構文が完全に機能するため、特に何が欠けているのかわかりません。

報告するエラーはありません。これは、plunker にあるもののスニペットです。

コントローラ

var app = angular.module('demo', ['ngSanitize', 'ui.select']);

app.controller("MainCtrl", MainCtrl);

function MainCtrl()
{
  var controller = this;

  controller.person = {};
  controller.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
  ];

}

index.html

<body ng-controller="MainCtrl as vm">
    <h3>Select2 theme</h3>
    <p>Selected: {{vm.person.selected}}</p>
    <ui-select ng-model="person.selected.name" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in vm.people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>
4

2 に答える 2

2

(plunker の要件)httpsではなく、すべてのスクリプトを修正して に変更すると、ControllerAs バージョンはそれ以上の調整なしで完全に動作します。httpng-model="person.selected.name"ng-model="vm.person.selected.name"

https://plnkr.co/edit/2VtUefWPKdBVaqY1gU66?p=preview

于 2016-02-09T03:03:19.720 に答える
0

のエイリアスとして使用される名前は、ファイルで参照される変数と同じ名前にcontrollerする必要があります。さらに、 method のスコープがありません。したがって、ここでは、JS の変数は. jsfiddleの例を参照できます。HTMLJavascriptMainCtrl()vm

以下の更新されたコードを見つけてください。

Javascript

function MainCtrl($scope) {
    var vm = this;

    vm.person = {};
    vm.people = [
      { name: 'Adam', email: 'adam@email.com', age: 10 },
      { name: 'Amalie', email: 'amalie@email.com', age: 12 },
      { name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
      { name: 'Samantha', email: 'samantha@email.com', age: 31 },
      { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
      { name: 'Natasha', email: 'natasha@email.com', age: 54 },
      { name: 'Nicole', email: 'nicole@email.com', age: 43 },
      { name: 'Adrian', email: 'adrian@email.com', age: 21 }
    ];
    $scope = vm;
}
于 2016-02-08T06:09:30.977 に答える