I want to pass JSON string into ng-click
here is the JSON string:
{"id":0,"parentID":0,"SubMenuItems":[],"imageName":"Icon.png","moduleName":"No Menu"}
HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<h1>Hello Plunker!</h1>
<button ng-click="go({
"id": 0,
"parentID": 0,
"SubMenuItems": [],
"imageName": "Icon.png",
"moduleName": "No Menu"
})">GOOOOOOOOOOOOOO!!!!!!!!!!</button>
</body>
</html>
JS:
// Code goes here
var app = angular.module('app', []);
app.controller('appCtrl', ['$scope',
function($scope) {
$scope.go = function(parm) {
alert('hi');
};
}
]);
PLUNKER
There are two problems. The first is that you need to declare ngController directive ng-controller="appCtrl" on some element. The second one is that you have to take ngClick attributes in quotes and then pass object without quotes into go function. Angular will understand that you are passing and object:
<body ng-app="app" ng-controller="appCtrl">
<h1>Hello Plunker!</h1>
<button ng-click='go({
"id": 0,
"parentID": 0,
"SubMenuItems": [],
"imageName": "Icon.png",
"moduleName": "No Menu"
})'>GOOOOOOOOOOOOOO!!!!!!!!!!</button>
</body>
Demo: http://plnkr.co/edit/8WuuhbCaZBom05ep576K?p=preview
Related
I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
index.html
test.json
I want to be able to dynamically filter by the user clicking the button repersenting who's specific phone number they would like to see instead of using "filter: {Name: 'Bob'}" only showing Bobs info but I have not been able to find a way to use a variable in place of 'Bob'. I have provided the code in images.
Plunker was right in how I use a variable in my filter, I just did what Shb said in the comments as well so my buttons were out of scope and I just adjusted the tags ng-app and ng-controller to the body and Punkers solution to the filter works. Thanks guys something I should have easily seen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Try following code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Plunker
I created an ng-sortable example in Plunker but it's not working.
Here's the JavaScript:
angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
$scope.presidents = [
'George Washington',
'Abraham Lincoln',
'William Jefferson Clinton'
];
$scope.dragControlListeners = {
accept: function(sourceItemHandleScope, destSortableScope) { return true },
itemMoved: function(event) {},
orderChanged: function(event) {}
};
}]);
And the HTML:
<!DOCTYPE html>
<html ng-app="sortableExample">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">
<script src="script.js"></script>
</head>
<body ng-controller="PresidentsCtrl">
<ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
<li data-ng-repeat="president in presidents" data-as-sortable-item>
<div data-as-sortable-item-handle>{{ president }}</div>
</li>
</ul>
</body>
</html>
The right stuff shows up but it's not interactive like it should be. Any idea why?
You should not include links to github source -)
Since there is no cdn for ng-sortable - just copy it to plunker.
Also you forget to add dependency of ng-app.
angular.module('sortableExample', ['as.sortable'])
http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview
I want to filter the ng-repeat values using
ng-repeat="obj in object | filter :searchtext"
but it should show the result only after the user give values to the searchtext.
it shouldn't list out the values on page load itself.
Thanks in advance :)
you can use ng-show=searchtext on ng-repeat element.
try this snippet
function ListCrtl($scope) {
$scope.items = [1, 2, 3, 4, 5];
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="ListCrtl">
<input ng-model="search.term" />
<p ng-show="search.term" ng-repeat="item in items|filter:search.term">{{item}}</p>
</div>
</body>
</html>
Have condition like this
ng-if="searchtext" ng-repeat="obj in object | filter :searchtext"
Example:
<!doctype html>
<html ng-app="docsSimpleDirective">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input type="search" class="form-control" placeholder="Rechercher" data-ng-model="search" />
<div ng-if="search" ng-repeat="departement in depatements | filter:search">
<pre>{{departement}}</pre>
</div>
</div>
</body>
</html>
script.js:
angular.module('docsSimpleDirective', [])
.controller('Ctrl', function($scope) {
$scope.depatements = [
{"codeDept": "01", "libelleDept": "D1", "libelleRegion":"R1", "codeRegion": "04"},
{"codeDept": "02", "libelleDept": "D2", "libelleRegion":"R2", "codeRegion": "08"},
{"codeDept": "03", "libelleDept": "D3", "libelleRegion":"R3", "codeRegion":"09"}
];
})
I was writing a code in html5 and angular js. I am encountering a problem in passing parameters with space. Here is my code :
angular.module('MyApp', [])
controller('MyCtrl', function($scope) {
$scope.validate = function(description,code) {
alert(description,code);
}
});
<!DOCTYPE html>
<html>
<body ng-app="MyApp">
<div ng-repeat="x in allItem.items" class="col-75" ng-controller="MyCtrl">
<a href="#" ng-click="validate({{x.itemDesc}},{{x.itemCode}})">
<div class="card item center">{{x.itemName}}
</div></a>
</div>
</body>
</html>
The JSON format is like this
Json contains
allItem
{
items
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
}
{
itemName: "Tomato",
itemDescr: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
}
I am not able to pass the parameters. I don't know how to pass the text that contains spaces and quotes('). Can anyone help me
Your Json needs to be an array, skip the href="#" and you do not need to bind within ng-click. The code below is fully functioning and running.
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.allItem =
{
items:[
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
},
{
itemName: "Tomato",
itemDesc: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
]
};
$scope.validate = function(description, code) {
console.log(description,'-', code);
};
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<br/>
<div ng-repeat="x in allItem.items" class="col-75">
<a ng-click="validate(x.itemDesc, x.itemCode)">
<div class="card item center">{{x.itemName}}
</div>
</a>
</div>
</body>
</html>