Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="App" >
    <head>
        <title>邊做邊學angular-3 Event</title>
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
        <script src="http://vitalets.github.io/checklist-model/checklist-model.js"></script>
    </head>
    <body>
        <!-- controller where using ng  -->
        <div ng-controller="clickCtrl">
​
            <div>
                <h2>Click event</h2>
                <input type="button" value="click" ng-click="testClick()">
            </div>
        </div>
​
        <div ng-controller="changeCtrl">
            <div>
                <h2>Change event</h2>
                <select ng-model="Select1" ng-options="m.ProductName for m in lotteryModel" >
                    <option value="">-- 請選擇 --</option>
                </select>
                <p>
                    you select index:{{Select1.id}}
                </p>
            </div> 
        </div>
​
        <div ng-controller="checkCtrl">
            <div>
                <h2>check event</h2>
                <div>
                    <label ng-repeat="city in lotteryModel">
                        <input  type="radio" name="ckradio" ng-model="lotteryModel.index"  value="{{city.id}}" >
                        <span>{{ city.ProductName}}</span>
                    </label>                
                </div>
                <p>
                    you select index:{{ lotteryModel.index}}
                </p>
            </div>
        </div>
​
        <div ng-controller="checkBoxCtrl">
            <div>
                Value1: <input type="checkbox" ng-model="value1"> <br/>
                Value2: <input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO"> <br/>
                <tt>value1 = {{value1}}</tt><br/>
                <tt>value2 = {{value2}}</tt><br/>
            </div>
        </div>
​
​
        <div ng-controller="checkBoxCtrl2">
            <div>
                <h2>checkbox event using Checklist-model</h2>
                <div>
                    <label ng-repeat="role in roles">
                        <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
                    </label>
                </div>
                <p>
                    user.roles {{ user.roles | json }}
                </p>
            </div>
        </div>        
​
​
​
        <script>
                    var L2App = angular.module('App', ['checklist-model']);
​
                    L2App.controller('clickCtrl', function($scope) {
                        //click event
                        $scope.testClick = function() {
                            alert('click');
                        };
                    });
​
                    L2App.controller('changeCtrl', function($scope) {
                        //select item
                        $scope.lotteryModel = [
                            {
                                id: 1,
                                ProductName: '台北'
                            },
                            {
                                id: 2,
                                ProductName: '台中'
                            },
                            {
                                id: 3,
                                ProductName: '台南'
                            }];
​
                    });
​
                    L2App.controller('checkCtrl', function($scope) {
                        //select item
                        $scope.lotteryModel = [
                            {
                                id: 4,
                                ProductName: '台北'
                            },
                            {
                                id: 5,
                                ProductName: '台中'
                            },
                            {
                                id: 6,
                                ProductName: '台南'
                            }];
                        $scope.lotteryModel.index = 4;
                    });
​
                    L2App.controller('checkBoxCtrl', function($scope) {
                        //select item
                        $scope.value1 = true;
                        $scope.value2 = 'YES'
                    });
​
                    L2App.controller('checkBoxCtrl2', function($scope) {
                        $scope.roles = [
                            {id: 1, text: 'guest'},
                            {id: 2, text: 'user'},
                            {id: 3, text: 'customer'},
                            {id: 4, text: 'admin'}
                        ];
                        $scope.user = {
                            roles: [2, 4]
                        };
                    });
​
        </script>
​
​
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
y7t2ffffpro
0viewers