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="appDetails" lang="en">
<head lang="en">
    <meta charset="UTF-8">
    <title>Application Details</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div ng-controller="TypesController">
    <table>
        <strong>myModel: </strong>
​
        <code>  {{clientDetailsData}}   </code>
​
        <tr>
            <td> <strong>Production : </strong>  </td>
            <td> {{types.production.text}} </td>
            <td><app-typedisplay env="production" status="non-base"></app-typedisplay></td>
        </tr>
        <tr>
            <td> <strong>SandBox : </strong>  </td>
            <td> {{types.sandbox.text}}  </td>
            <td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td>
        </tr>
        <tr>
            <td><strong>QA : </strong>
            <td> {{types.qa.text}}  </td>
            <td><app-typedisplay env="qa" status="base"></app-typedisplay></td>
        </tr>
        <tr>
            <td><br /><br /></td>
        </tr>
        <tr>
            <td><strong>Selected : </strong>
​
            </td>
            <td><code>  {{myModel.text}}   </code>
​
            </td>
        </tr>
        <tr>
            <td><br /><br /></td>
        </tr>
    </table>
</div>
​
​
</body>
</html>
 
​
 
var appDetails = angular.module('appDetails', []);
​
appDetails.controller('TypesController', function ($scope, $window) {
    $scope.myModel = {};
​
    $scope.$watch('myModel', function (v) {
        console.log('changed', v);
    });
​
    $scope.types = {
        "production": {
            "text": " None Selected"
        },
            "sandbox": {
            "text": " None Selected"
        }
    };
​
    $scope.sync = function (env) {
        $scope.types[env] = $scope.myModel;
    };
​
    $scope.options = {
        "test1": {
            "text": "test1n",
                "scopePolicy": "scope1",
                "type": "type1"
        },
            "test2": {
            "text": "test3",
                "scopePolicy": "scope2",
                "type": "type2"
        },
            "test3": {
            "text": "test3",
                "scopePolicy": "scope3",
                "type": "test3"
        }
    };
})
    .directive('appTypedisplay', function ($compile) {
​
    var getTemplate = function (content) {
        var template = '';
        var base = "<button type='button' class='btn btn-default' " +
            "ng-class='{active: option.text == model.text}'" +
            "ng-repeat='option in options' " +
            "ng-click='activate(option)'>{{option.text}} " +
            "</button>";
​
        var non_base = "<td> <button " +
            'ng-click=\'sync("' + content.env + '")\'>' +
            "Sync to " + content.env + "</button> </td>";
​
        switch (content.status) {
            case 'base':
                template = base;
                break;
            case 'non-base':
                template = non_base;
                break;
        }
​
        return template;
    };
​
    var linker = function (scope, element, attrs) {
        element.html(getTemplate(attrs));
        $compile(element.contents())(scope);
    };
​
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            env: '='
        },
        controller: function ($scope) {
            $scope.activate = function (option) {
                $scope.model = option;
            };
        },
        link: linker
    };
});
​
function l(obj) {
    alert(JSON.stringify(obj));
}
Output

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

Dismiss x
public
Bin info
epinapalapro
0viewers