Following Scott Allen's first code (simple) sample, after drop-down entry changes the wired ng-model is not refreshing this
{{engineer.currentActivity}}
Browser: FF 50.1.0
Angular: 1.5.9
jQuery: 1.7
HTML:
<div ng-controller="EngineeringController">
{{engineer.name}} is currently : {{engineer.currentActivity}}
<div>
choose an activity:
<select id="agDDLClient" ng-model="EngineeringController.currentActivity" ng-options ="act for act in activities">
</select>
</div>
<input type="button" ng-click="what()" value="check" />
</div>
JS:
var aIS = angular.module("app", []);
aIS.controller("EngineeringController", function($scope, $http)
{
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function(){ alert($scope.engineer.currentActivity);}
});
ng-model value should be engineer.currentActivity instead of EngineeringController.currentActivity as you are trying to alert the $scope.engineer.currentActivity inside what() function.
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('EngineeringController',function($scope) {
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities = [
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function() {
alert($scope.engineer.currentActivity);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="EngineeringController">
{{engineer.name}} is currently : {{engineer.currentActivity}}
<div>
choose an activity:
<select id="agDDLClient" ng-model="engineer.currentActivity" ng-options ="act for act in activities">
</select>
</div>
<input type="button" ng-click="what()" value="check" />
</div>
Change to ng-model="engineer.currentActivity" instead of ng-model="EngineeringController.currentActivity"
and also your controller code should be follow this
var aIS = angular.module("app", []);
aIS.controller("EngineeringController", function($scope, $http)
{
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
$scope.what = function(){ alert($scope.engineer.currentActivity);}
});
Related
onhstrong text:
When i click checkbox table id based column name shown in the right side using json data
JS
var app = angular.module('plunker', ['ui']);
app.controller('MyCtrl', function($scope) {
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});
HTML
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
Show Selected
</div>
I am trying to create a form with a dropdown input field and a submit button in AngularJS. Everything works fine except the output is empty xD. I am using <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>. And if it's any help on server side I am using PHP Version 5.5.36-1+donate.sury.org~trusty+1.
Here's the Angular code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.myTxt = "You have not clicked submit, yet!";
$scope.show_result = false;
$scope.myFunc = function() {
$scope.myTxt = "You clicked submit!";
$scope.show_result = true;
}
$scope.categories = [
{"value": 0, "categoryname": "standard"},
{"value": 1, "categoryname": "premium"},
{"value": 2, "categoryname": "gold"}
];
$scope.submitData = function() {
$scope.category = {};
console.log($scope.category);
var jsonString = JSON.stringify($scope.category);
$http.post('ServerController.php', jsonString, {'Content-Type': 'application/x-www-form-urlencoded'})
.success(function(data, status) {
$scope.status = status;
$scope.data = data;
});
}
});
Here is the ServerController.php :
$jsonString = file_get_contents('php://input');
$form_data = json_decode($jsonString, true);
if ($form_data != null) {
echo 'Success!!!';
var_dump($form_data);
} else {
echo 'Sorry!!!';
var_dump($form_data);
}
Here is the HTML:
<body ng-app="plunker">
<form ng-submit="myFunc()" ng-controller="MainCtrl">
<label><b>Category:</b></label>
<select ng-model="category" ng-options="x.categoryname for x in categories track by x.value">
<option value="">Choose a Category</option>
</select>
<p><b>Model:</b> {{category}}</p>
<input ng-click="submitData()" type="submit" value="Submit"></input>
<i>{{myTxt}}</i>
<p ng-show="show_result"><b>Submitted result:</b> {{data}}</p>
</form>
</body>
Here is how the form looks on page load:
This is after you select category in the dropdown:
And finally after clicking submit:
Note: The server controller is sending the output in Submitted result ie. Sorry!!!<pre class='xdebug-var-dump' dir='ltr'> <b>array</b> <i>(size=0)</i> <i><font color='#888a85'>empty</font></i> </pre>
Any ideas?
All I did was modify their official Async Search demo (it fits my use case) to make use of "controller as", and getting weird behaviour as a result. Codepen is here. Am I missing anything?
Here's the relevant bits of code from the above link:
JS:
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SelectAsyncController', function($timeout, $scope) {
var vm = this;
vm.user = null;
vm.users = null;
vm.loadUsers = function() {
return $timeout(function() {
vm.users = vm.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' }
];
}, 650);
};
});
Markup:
<div ng-controller="SelectAsyncController as vm" layout="column" ng-app="MyApp">
<md-select placeholder="Assign to user"
ng-model="vm.user"
md-on-open="vm.loadUsers()">
<md-option ng-value="vm.user"
ng-repeat="user in vm.users">{{user.name}}</md-option>
</md-select>
<p>Assigned to: {{ vm.user ? vm.user.name : 'No one yet' }}</p>
</div>
You should change ng-value to "user".
<md-option ng-value="user" ng-repeat="user in vm.users">{{user.name}}</md-option>
Here is the working Codepen.
I was playing around with some jsfiddle examples and changed it for some tests. Unfortunately it is not working anymore and i have no clue why. Can anyone have a quick look at this fiddle and give me a hint:
http://jsfiddle.net/w8LrL8xr/2/
javascript:
var myApp = angular.module("myApp");
myApp.controller("MyCtrl", function($scope) {
$scope.fonts = [
{title: "Arial" , text: 'Url for Arial' },
{title: "Helvetica" , text: 'Url for Helvetica' }
];
$scope.change= function(option){
alert(option.title);
}
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
</select>
<p>{{opt}}</p>
</div>
</div>
Your module definition is incorrect, you need to supply a list of dependencies to init it correctly or an empty [] if you have none.
e.g.
var myApp = angular.module("myApp", []);
You are also missing a trailing ) when you register your controller.
var myApp = angular.module("myApp", []);
myApp.controller("MyCtrl", function($scope) {
$scope.fonts = [
{title: "Arial" , text: 'Url for Arial' },
{title: "Helvetica" , text: 'Url for Helvetica' }
];
$scope.change= function(option){
alert(option.title);
};
});
Fixed fiddle
I am new to ng-grid. I am learning ng-grid with edit template options. i have created grid with edit checkbox options.But i don't know How to get value in that grid after edit the checkbox? Thank you.
Here JSfiddle.
var myapp = angular.module('myapp', ["ui", "ngGrid"]);
myapp.controller('myctrl', function($scope, $http) {
$scope.testInfo= "TestInfo";
$scope.data = {
persons: [],
selected:[],
load: function () {
$http.get("/echo/json/").success(function(data) {
$scope.data.persons = [
{id:1, name:"Max", number:51323.512,value:'on'},
{id:2, name:"Adam", number:7245.2,value:'on'},
{id:3, name:"Betty", number:828,value:'off'},
{id:4, name:"Sara", number:23452.45182,value:'on'}
];
$scope.data.selected[0] = $scope.data.persons[0];
});
}
};
var cellTemplate = "<div ng-class=\"'ngCellText colt' + $index\">"
+ " <span ng-cell-text>{{COL_FIELD}}</span>"
+ "</div>";
var cellEditTemplate = '<input type="checkbox" ng-checked="row.entity.value==\'on\'" ng-input="COL_FIELD" /></div>';
$scope.grid = {
options: {
data: "data.persons",
selectedItems: $scope.data.selected,
multiSelect: false,
columnDefs: [
{field:"id", displayName:"ID"},
{field:"name", displayName:"Name"},
{field:"number", displayName:"Nummer", cellFilter:"number:2"},
{field: "value",displayName:"Value",enableCellEdit : true,cellTemplate : cellTemplate,
editableCellTemplate : cellEditTemplate}
]
}
};
});
<div ng-app="myapp">
<div ng-controller="myctrl">
<a class="btn" ng-click="data.load()">Get data!</a>
<div ng-grid="grid.options" class="grid"></div>
<ul ng-repeat="item in data.selected">
<li>{{item}}</li>
</ul>
</div>
</div>
You've probably already figured this out by now, but one possible options is to use ng-grids build in checkbox selector. It's not shown in the examples on their main page, but listed as an option in the API.
showSelectionCheckbox: true