syuichi-tsuji
3/23/2014 - 12:25 PM

angular sample

angular sample

tools.js
content_copyfile_download
var ToolApp = angular.module('app', ["ngAnimate"]);

ToolApp.directive('bigSelect', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
      element.on("change", function(){
        alert(attrs.bigSelect);
      });
    }
  };
});

ToolApp.controller('ToolListCtrl', ["$scope", function ($scope) {
  $scope.tools = [
    {'name': 'Redmine'},
    {'name': 'Jenkins'},
    {'name': 'Chef'}
  ];

  $scope.addTool = function() {
    $scope.tools.push({'name': $scope.todoText});
    $scope.todoText = null;
  }
}]);
old_tools.js
content_copyfile_download
$(function(){
  $(".big-select").css({height: "50px", width: "160px"}).on("change", function(){
    alert("GoodChoice!");
  });
});
angular_sample.html
content_copyfile_download
<!doctype html>
<html ng-app="app">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="old_tools.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-animate.min.js"></script>
    <script src="tools.js"></script>
    <style>
      body{ padding: 10px; }
      fieldset{ border: none; }
      .animate.ng-enter {
        -webkit-transition: 0.3s linear all;
        transition: 0.3s linear all;
        opacity: 0;
        margin-left: -100px;
      }
      .animate.ng-enter.ng-enter-active {
        opacity: 1;
        margin-left: 0;
      }
    </style>
  </head>
  <body>
    <div ng-controller="ToolListCtrl">
      <fieldset>
        <label>あなたの名前:</label>
        <input type="text" ng-model="name">
      </fieldset>
      <h2>{{name}}が語る{{tools.length}}種の神器</h2>
      <ul>
        <li ng-repeat="tool in tools" class="animate">
          <span>{{tool.name}}</span>
          <select class="big-select" big-select="Nice" ng-model="tool.like">
            <option value="">どのくらい好き？</option>
            <option value="normal">いや、普通に</option>
            <option value="straw">ストローで飲むくらい好き</option>
          </select>
        </li>
      </ul>
      <form ng-submit="addTool()">
        <input type="text" ng-model="todoText">
        <input type="submit" value="add">
      </form>
    </div>
  </body>
</html>