web-dev-qa-db-ja.com

ng-optionでng-clickを使用する方法（または値を割り当てる他の方法）

Ng-optionsの使用方法。

$scope.fieldTable = [
    { 
        filed:"text",
        title:"Global"
    },
    {
        field: "relatedentity",
        title: "Entity"
    },
    {
        field:"title",
        title:"Title"
    },
    {
        field: "content",
        title: "Content"
    }
]

表示されているタイトルを使用してビルドし、何かを選択すると、対応するフィールドを表示するアラートウィンドウをポップアウトします。最初の選択は

{ 
    filed:"text",
    title:"Global"
}

誰でも助けることができますか？

angularjsng-options
15
Kuan
var app = angular.module('stack', []);

app.controller('MainCtrl', function($scope) {
  $scope.fieldTable = [{
    field: "text",
    title: "Global"
  }, {
    field: "relatedentity",
    title: "Entity"
  }, {
    field: "title",
    title: "Title"
  }, {
    field: "content",
    title: "Content"
  }];

   $scope.selected = $scope.fieldTable[0];

  $scope.hasChanged = function() {
alert($scope.selected.field);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="stack" ng-controller="MainCtrl">
   <select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
  </select>
</body>
22
Bazinga

Ng-changeを使用してそれを行うことができます

<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">

次に、コントローラのonChange（）メソッドで、あなたがやりたいことを何でもすることができます:)あなたの場合、値を持つアラートを表示します

編集： https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview

3
rmuller