2

AngularJSからのフォローアップ: 時計が機能しない理由

function myController($scope, $http) {

    $scope.abc = abcValueFromOutsideOfMyController;    

    $scope.getAbcCnt= function()
    {
        url2 = baseURL + '/count/' + $scope.abc;

        $http.get(url2).success(function (data) {
            $scope.abcCnt = data.trim();
        });
    };

    $scope.$watch('abc',getAbcCnt);
}

$scope.abc で未定義のエラーが発生する理由。

abcValueFromOutsideOfMyController は、ドロップダウンから要素を選択することで設定されます。最初は未定義ですが、ドロップダウンが選択されるとすぐに、値は未定義以外になります。コンソールで確認したところ、値が得られました。

ドロップダウンコードはこちら

$(document).on('click', '.dropdown-menu li a', function () {

    selectedItem = $(this).text();
    $("#selectedItem").text(selectedItem);
    abcValueFromOutsideOfMyController= selectedItem.trim();
    console.log(abcValueFromOutsideOfMyController);
});

これが私のhtmlです

<div class="dropdown btn">

    <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown"
         data-target="#" >
        &nbsp;<span id="selectedItem" ng-model="abc">Items</span>
        <b class="caret"></b>
    </div>

    <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    </ul>
</div>

私は AngularJS を初めて使用します。欠落している基本的な概念があり、上記を実行できない場合はお知らせください。

4

3 に答える 3

4

$scope.abc、あなたが言及したように、ある時点で未定義であり、おそらくこの間にアクセスされています。$scope.abcjQuery 経由で設定しているようですng-model。AngularJS 内で設定する必要があります。

まず、変数のスタブを定義します。

$scope.abc = "";

次に、HTML で:

<input ... ng-model="abc" ... />

これにより、入力要素 (セレクションでも機能) がバックエンド変数にバインドされます。ユーザーが選択すると、魔法のようにコードで更新され、コードで変数を更新すると、ビューでも更新されます!

ここで詳細を読むことができますng-model: http://docs.angularjs.org/api/ng.directive:ngModel

アップデート

Twitter Bootstrap のドロップダウンで動作する別のオプションを次に示します。これは、最も「最善」の解決策ではないかもしれませんが、最初に頭に浮かんだものです。

要素にng-clickディレクティブを追加し、コントローラーで関数を呼び出すことができます。次に、そのコントローラーは、ボタンのタイトルとして使用される変数を設定します。その場合は を使用せずng-model、変数を{{ }}コンテナーに含めるだけです。

HTML は次のようになります。

<div class="dropdown btn">
  <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" >
    <span>{{ selectedItem }}</span>
    <b class="caret"></b>
  </div>

  <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    <li ng-click="OnItemClick('Option 1')">Option 1</li>
    <li ng-click="OnItemClick('Option 2')">Option 2</li>
    <li ng-click="OnItemClick('Option 3')">Option 3</li>
  </ul>
</div>

...そしてあなたのJavaScript：

function DropdownCtrl($scope) {

  $scope.selectedItem = "Items";

  $scope.OnItemClick = function(event) {
    $scope.selectedItem = event;
  }
}

例のプランカーを作成しました。ここで見つけることができます: http://plnkr.co/edit/JrKJKxfG6aYiLHfR4pGE?p=preview

于 2013-05-10T16:53:33.730 に答える
0

以下のように、ドロップダウンから選択したアイテムを取得できます。

<body ng-app="app" ng-controller="ctrl">
<p>Id:{{id}}</p>
<select ng-model="id" ng-options="val.id as val.name for val in options">
</select>
<script>
angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
    $scope.options = [
      {id:1, name:'First'},
      {id:2, name:'Second'}
    ]
    $scope.$watch('id');
  }])
 </script>
</body>
于 2015-07-01T16:06:19.660 に答える