I'm using .net mvc3 application with angular js. In my view i'm trying to create the input field with ng-model property. Suppose if i have the following code, how i have to add ng-model attribute?
#foreach(var item in Model.ListItem)
{
<input type="text" value="item.name" name="Model.ListItem[count].name" ng-model="???"/>
}
Please help me with this.
I don't like the idea of meshing with backend template, but this should work:
<script>
angular.module("YourApp", [])
.controller("YourController", function($scope) {
$scope.list = [];
#foreach(var item in Model.ListItem)
{
$scope.list.push({
name: "#item.name"
// add other properties if you like
});
}
});
</script>
<div ng-app="YourApp">
<div ng-controller="YourController">
<input ng-repeat="item in list" type="text" name="{{item.name}}" ng-model="item"/>
</div>
</div>
Related
HTML script
<div>
<select ng-model="selectView">
<option value="empTable.html">Table View</option>
<option value="empList.html">List View</option>
</select>
<div ng-include="selectView"></div>
</div>
Angular script
var angScript = angular.module("multiselectapp",[]). controller ("multicontroller", function ($scope){
var empList = [
{ name:"sue", gender:"female" },
{ name:"Joe", gender:"male" }
];
$scope.employees =empList;
$scope. selectView ="empTable.html";
});
The empTable.html and empList.html has basic HTML script using ng-repeat to display the table and list view.
The angular script file is loaded and all paths are good to go having cross verified them with a $scope.message="file detected in html“ message which is displayed on HTML page.
But the table and list is not displayed at all.
Suggestions please!
Ng-include=" '{{selectedView}}' "
if its not gonna work try removing {{}}
Try out
<div ng-include src="selectView"></div>
It seems it works for me:
https://embed.plnkr.co/wFaG4m?p=preview
<body ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items"></select>
<div ng-include="selectedItem.name"></div>
</body>
var app = angular.module('plunker', []);
Js:
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.selectedItem = { name: 'a.html'};
$scope.items = [{name: 'c.html'},{ name: 'a.html'}];
});
$scope. selectView ="empTable.html";
Here unnecessary space is there between $scope and the variable name. Try removing space as below $scope.selectView ="empTable.html";
I have a problem with implementing "select All" feature for simple list:
Controller:
$scope.numbers = [{v:1},{v:2},{v:3},{v:4}];
Template:
select All
<p ng-repeat='n in numbers'>
<label>
<input type="checkbox" ng-model="n.selected">
Label: {{ n.v }}
</label>
</p>
It seems angular parser cannot process the ng-click statement:
Error: [$parse:syntax]
(...)
at relational (angular.min.js:234)
at r.equality (angular.min.js:233)
at r.logicalAND (angular.min.js:233) "<a href="" ng-click="numbers.forEach(function(v) {v.selected=true;});">"
Plunker demo:
https://plnkr.co/edit/6OZP02SZ5ZYa0iO4PBY3?p=preview
Can I implement that just in the html template or have to use the controller method?
Edit: Controller method works fine, I'm just still interested why in-place code doesn't parse though?
Try like below, numbers.forEach(function(v) {v.selected=true;}); is wrong will throw the error because numbers doesn't have forEach menthod and anonymous function will not work in ng-click
This is the best way to perform select all
<div ng-app="myApp" ng-controller="myCtrl">
<label>
<input type="checkbox" ng-model="all">
Select All
</label>
<p ng-repeat='n in numbers'>
<label>
<input type="checkbox" ng-checked="all">
Label: {{ n.v }}
</label>
</p>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.numbers = [{v:1},{v:2},{v:3},{v:4}];
});
https://fiddle.jshell.net/mspj0z65/1/
HTML
<div ng-app="myApp" ng-controller="myCtrl">
select All
<p ng-repeat='n in numbers'>
<label>
<input type="checkbox" ng-model="n.selected">
Label: {{ n.v }}
</label>
</p>
</div>
Angular script:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.numbers = [{v:1},{v:2},{v:3},{v:4}];
$scope.loop = function(){
angular.forEach(numbers, function(v) {
v.selected=true;
});
}
});
https://fiddle.jshell.net/mspj0z65/
It is better implements the method on controller as:
$scope.selectAll=function() {
$scope.numbers.forEach(function(v) {
v.selected=true
});
}
and in view use ng-click="selecAll()"
Let your view as simple as posible and make the code more readable ans ease to
understand by third parties or own in the future.
I recomend take a view to John Papa Angular style guide
In my angular application, I came into a filter related issue. I have reproduced this issue with a simple live demo as bellow:
https://jsfiddle.net/baoqger/fpo3j6gx/2/
<div ng-app="app">
<div ng-controller="filterCtrl as f">
<input type="text" ng-model="f.inputdata"></input>
<span ng-click="f.setFilter('lowercase')">First Filter</span>
<span ng-click="f.setFilter('uppercase')">Second Filter</span>
<div ng-bind="f.inputdata | f.filtername"></div>
</div>
click First Filter or Second Filter will trigger the setFilter function.
function filterCtrl() {
this.setFilter = function ( name ){
this.filtername = name;
}.bind(this);
}
angular
.module('app', [])
.controller('filterCtrl', filterCtrl)
In the controller, the filtername will be set to lowercase or upper case, depends on which button was clicked as mentioned above.
Then set the filtername as filter method as below:
<div ng-bind="f.inputdata | f.filtername"></div>
But based on the error message, it seems that angular system can't support such usage. Any help?
Try this solution:
Javascript:
.controller('filterCtrl', ['$filter' function($filter){
var self = this;
self.setFilter = function(name){
self.filter = $filter(name);
}
}]);
HTML:
<div ng-app="app">
<div ng-controller="filterCtrl as f">
<input type="text" ng-model="f.inputdata"></input>
<span ng-click="f.setFilter('lowercase')">First Filter</span>
<span ng-click="f.setFilter('uppercase')">Second Filter</span>
<div ng-bind="f.filter?f.filter(f.inputdata):f.inputdata"></div>
</div>
I am using a javascript UI library as DHTMLX or YUI etc.
And I am using AngularJS to process dynamic page.
What I need is just simple.
UI code is
...
<Input type="checkbox" name="XXX" />
....
My.js
...
app.controller('XXXCtrl', function($scope){
$scope.$watch(???){
if (XXX) console.log("checkbox was checked!!!");
else console.log("checkbox was unchecked!!!");
????
};
})
I am new to AngularJS. Please help me!!!
You have to bind the value to the scope via ng-model. There is more detail in the documentation, but you can do something like that:
$scope.checkboxModel = true;
$scope.myAction = function () {
msg = $scope.checkboxModel ? 'checked' : 'unchecked';
console.log(msg);
};
And in your HTML file:
<form name="myForm" ng-controller="XXXCtrl">
<label>Value1:
<input type="checkbox" name="XXX" ng-model="checkboxModel" ng-change="myAction()">
</label><br/>
<tt>value1 = {{checkboxModel}}</tt><br/>
</form>
You can access to the window object using document.getElementById combined with ng-click event listener
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
$scope.checker= function(e){
var chkBox = document.getElementById(e.target.id);
console.log(chkBox.checked)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='appCtrl'>
<input type="checkbox" id="myCheckbox" name="myCheckbox" ng-click="checker($event)"/>
</div>
</div>
i am making dropdown list with input field in angular.js but got no success
the code which i using..
<div ng-app="" ng-controller="namesCtrl">
<h2>filter input</h2>
<input type="text" ng-model="test"/>
<ul>
<li ng-repeat="x in names | filter:test | orderBy : 'name'">
{{ x.name + ',' + x.country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "";
$scope.lastName= "";
});
</script>
<script src="namescontrol.js"></script>
Check the working demo: JSFiddle.
Use a customized filter to perform the filtering. Since ng-model binds to the value key. Whenever key is changed, the items will be filtered and the view will be changed.
angular.module('Joy',[])
.controller('JoyCtrl', ['$scope', function ($scope) {
$scope.items = ['one', 'two', 'three', 'four', 'five'];
$scope.key = '';
$scope.search = function (value) {
return value.indexOf($scope.key) >= 0;
}
}]);
HTML:
<div ng-app="Joy" ng-controller="JoyCtrl">
<input type="text" ng-model="key">
<div>
<li ng-repeat="item in (items | filter:search)" ng-bind="item"></li>
</div>
</div>
Update 1
If you want to hide the list initially: JSFiddle:
$scope.search = function (value) {
return $scope.key !== '' && value.indexOf($scope.key) >= 0;
};
Update 2
I have developed an open source project angular-sui based on Angular and Semantic-UI. There is a directive sui-select, which is exactly what you want. Please check the Demo.
I think what you are looking for is autocomplete functionality. AngularUI offers this through their Typeahead directive. https://angular-ui.github.io/bootstrap/#/typeahead
You want to have something like this:
<input type="text" ng-model="test" typeahead="name for name in names"/>
The directive will dynamically generate the list so you don't need to create that explicitly yourself.