I am creating a Plugin in Angular JS which takes Json (Json Array) as an input.
This json is "dynamically generated on the client side" (via some selections/ input by the user) & is stored in a variable.
var jsonX = //This is an Eg Structure.
[
{
"ObjectName": "test",
"ObjectTarget": "http://asdf.com/test.jpg",
},
{
"ObjectName": "test1",
"ObjectTarget": "http://asdf.com/test2.jpg",
}
] ;
I want to pass this variable jsonX to the controller.
I also have a requirement that I can use the plugin as many times in a single page but initialize it with different variables.
Progress So Far :
I have achieved the thing using static inputs. Need a way to pass dynamic data
//Js File
MyApp.controller('ObjectController', function ($scope) {
$scope.title = "Hello Title";
**//--How Can i pass a variable on my page to this.
// $scope.ObjectList = jsonX ;**
$scope.ObjectList = [
{
"ObjectName": "test",
"ObjectTarget": "http://asdf.com/test.jpg",
},
{
"ObjectName": "test1",
"ObjectTarget": "http://asdf.com/test2.jpg",
}
] ;
});
//& The HTML
<div ng-controller="ObjectController">
<!-- How can I pass the variable name through some tags Eg: ng-init = "jsonx" -->
</div
---------@worldAsk The Full Source Code
---ngObjectControl.js ---------------
'use strict';
/* Controllers */
var MyApp = angular.module('MyApp', []);
MyApp.controller('ObjectController', function ($scope) {
$scope.title = "Hello Title";
$scope.CurrentIndex = 0;
$scope.init = function (initVar) {
$scope.ObjectList = initVar; //init var is undefined
$scope.TotCnt = $scope.ObjectList.length;
};
/*
$scope.ObjectList = [
{
"ObjectName": "FROX001",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "Image",
"ObjectData": "Fiirst Waala"
},
{
"ObjectName": "FROX002",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "pdf",
"ObjectData": "Second Waala"
},
{
"ObjectName": "FROX003",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "icon",
"ObjectData": ""
},
{
"ObjectName": "FROX004",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "Image",
"ObjectData": "Fourth Waala"
}
];
*/
$scope.movePrev = function () {
if ($scope.CurrentIndex <= 0) {
return;
}
$scope.CurrentIndex = $scope.CurrentIndex - 1;
}
$scope.moveNext = function () {
if ($scope.CurrentIndex == $scope.TotCnt - 1) {
return;
}
$scope.CurrentIndex = $scope.CurrentIndex + 1;
}
});<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyApp">
<head runat="server">
<title></title>
<script>
var jsonx = [
{
"ObjectName": "FROX001",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "Image",
"ObjectData": "Fiirst Waala"
},
{
"ObjectName": "FROX002",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "pdf",
"ObjectData": "Second Waala"
},
{
"ObjectName": "FROX003",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "icon",
"ObjectData": ""
},
{
"ObjectName": "FROX004",
"ObjectTarget": "http://asdf.com/frox001.jpg",
"ObjectType": "Image",
"ObjectData": "Fourth Waala"
}
];
</script>
</head>
<body>
<div class="ngObjControl" ng-controller="ObjectController" ng-init="init(jsonx)">
<div class="container">
<div class="title" ng-if="title.length>0">
{{title}}
</div>
<div class="Preview" ng-repeat="obj in ObjectList" ng-show="$index==CurrentIndex">
<img ng-src="{{obj.ObjectTarget}}" ng-show="obj.ObjectType=='Image'" height="50"
width="50" alt="{{obj.ObjectName}}" />
<a ng-href="{{obj.ObjectTarget}}" ng-show="obj.ObjectType!='Image'" target="_blank">
{{obj.ObjectName}} Click to Proceed
<br />
</a>
<div class="objData" ng-show="obj.ObjectData.length>0">
{{ obj.ObjectData }}
</div>
</div>
</div>
<div class="Gallery">
<div class="GalleryBoxPrev">
<input type="button" value="<<" ng-click="movePrev()" ng-disabled="$index==0" />
</div>
<div class="GalleryBoxContainer">
<ul>
<li ng-repeat="obj in ObjectList">{{obj.ObjectName}}
<img ng-src="" alt="{{obj.ObjectName}}" height="50" width="50" />
</li>
</ul>
</div>
<div class="GalleryBoxNext">
<input type="button" value=">>" ng-click="moveNext()" ng-disabled="$index==(ObjectList.length-1)" />
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="Scripts/ngObjectControl.js" type="text/javascript"></script>
</body>
</html>
