I am using ng-repeat to create an array of items (a list), I would like to have an id against each item to be it's position in the array.
JS FIDDLE DEMO HERE: http://jsfiddle.net/m62Ez/15/
Please have a look at the following, looks like the ng-model="item.id" is never assign. Any suggestions much appreciated.
HTML
<div ng-controller="MainCtrl">
<button ng-click="addItem()">Add Item</button>
<ul>
<li ng-repeat="item in items">
<input type="hidden" ng-model="item.id" ng-value="{{$index}}" />
<input type="text" ng-model="item.name" />
</li>
</ul>
<hr />
<button ng-click="saveAll()">Save All</button>
</div>
JS
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {
$scope.items = [];
$scope.addItem = function () {
$scope.items.push({});
}
$scope.saveAll = function () {
console.log($scope.items); // item's do not have id's
}
});
The hidden field isn't useful. If you want your objects to have an ID, then generate them with an ID:
$scope.addItem = function () {
$scope.items.push({id: $scope.items.length});
}
Updated jsfiddle: http://jsfiddle.net/K7DgE/
Related
I have the following string;
$scope.Array="5678,9876,0988"
I am displaying it in my html as follows:
<li ng-repeat="ArrayItem in Array.split(',')">
<input type="checkbox" >
{{Zip}}
</li>
this displays all the string items separately along with a check box. I would like to know how to select multiple items from the list on the UI, and on the press of delete, delete these items from Array.
e.g. check 5678, 9876, and click Delete. The Array would now only have 0988.
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.toDelete = {};
$scope.Array="0988,9876,0988";
$scope.delete = function(){
$scope.temp = $scope.Array.split(',');
for(var prop in $scope.toDelete){
if($scope.toDelete[prop])
$scope.temp[prop] = undefined;
}
$scope.toDelete = {};
$scope.Array = $scope.temp.filter(function(x){ return x !== undefined; }).join(',');
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<ul>
<li ng-if='Array' ng-repeat="ArrayItem in Array.split(',') track by $index">
<input type="checkbox" ng-model='toDelete[$index]'>{{ArrayItem}}
</li>
</ul>
Array: {{Array | json}}
<br>
<input type='button' value='Delete' ng-click='delete()'/>
</div>
<div class="info-block" ng-app="">
<div ng-controller="Note">
<div class="checkbox">
<label>
<p><b>Primary Publication: </b>
{{ form_widget(form.input_ppubs, { 'attr': {'class': 'valOption'}}) }}
</p>
</label>
</div>
<div ng-repeat="item in items">
<input type="text" placeholder="new input" ng-model="item.primaryPub">
</div>
<button type="button" ng-click="add()">New Item</button>
</div>
I am trying to retrieve the value of the html input field and remove it from input upon a button click
I am able to get the code, but I don't know how to remove the code.
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
//angular way of implementing document.getElementByID();
pub1 = angular.element('#form_input_ppubs').val();
$scope.items.push({
primaryPub: pub1
});
};
}
You don't have to retrieve your items like this. It's ugly and not the angular way. angular.element('#form_input_ppubs').val();
Instead, simply reference it in your input using ngModel.
Declare it in your scope.
$scope.inputItem = null;
HTML
<input ng-model="inputItem " />
Use it in your function:
$scope.addItem = function(item) {
$scope.items.push(item);
//reset the model
$scope.inputItem = null;
}
Call it using ng-click
<button type="button" ng-click="addItem(inputItem)">Add Item</button>
If you do:
console.log($scope.items);
You should see an entry for primaryPub, the model for your input. Then you can target it by nulling the model, so:
$scope.items.primaryPub = null;
However you're using this inside an ng-repeat:
<div ng-repeat="(i, item) in items">
<input type="text" placeholder="new input" ng-model="items[i].primaryPub">
</div>
So your console.log (if you have more than one item in 'items') should show an array-like structure for primaryPub.
I want to make list of infos inputing Name, Work. THere is a form with those inputs. Putting Name and Work when SAVE button clicked, it will add to the list. and view them. But I also want to add id every time. How can I do this?
here is my plunker: https://plnkr.co/edit/VDYYrxk8Bz5KIoI0HFV4?p=preview
HTML:
<body ng-controller='MyController'>
<!-- <button ng-click='toggleForm()'>Upload</button> -->
<div>
<table class='table'>
<tr>
<th>Title</th>
<th>Work</th>
</tr>
<tr ng-repeat='info in infos'>
<td>{{info.name}}</td>
<td>{{info.work}}</td>
</tr>
</table>
</div>
<form class='form'>
<div class='form-group'>
<label>Name</label>
<input class='form-control' type="text" ng-model='info.name'>
</div>
<div class='form-group'>
<label>Work</label>
<input class='form-control' type="text" ng-model='info.work'>
</div>
<div class='form-group'>
<button class='btn btn-primary' ng-click='addInfos()'>Save</button>
</div>
</form>
</body>
script::
angular
.module('app')
.controller('MyController', function($scope){
// $scope.displayForm = false;
// $scope.toggleForm = function(){
// $scope.displayForm = !$scope.displayForm;
// };
$scope.infos = [];
// var currIndex = 0;
$scope.addInfos = function () {
$scope.infos.push({
name: '',
work: ''
// id: currIndex++
});
// $scope.infos.push(obj.info);
};
})
$scope.addInfos = function () {
$scope.infos.push({
name: $scope.info.name,
work: $scope.info.work,
id: $scope.infos.length + 1 // assuming you want ids to start with 1
});
$scope.info = {}; // to clear the form fields once an input is pushed to the array
};
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.
I'm pretty new in angularjs and I have no idea how do this.
<div class="userData" ng-repeat="user in users">
<div class="float"
<img ng-click="deleteUser($event)" src="myurl">
</div>
<div class="userDiv"
<input type="checkbox" ng-model="user.active" ng-click="handleUserActive()">
<input type="text" ng-model="user.text">
</div>
</div>
I need remove a item when the user click the img.
My model is:
$scope.users = [
{active: true, text: text}
]
Just do:
<img ng-click="deleteUser($index)" src="myurl">
And the method:
$scope.deleteUser = function(index) {
$scope.users.splice(index, 1)
}
What tymeJV said, however, you want to pass the object as the parameter rather than the index like this:
<img ng-click="deleteUser(user)" src="myurl">
$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1)
}
The reason why is the index can change if you do an orderBy on the ng-repeat.
See an example here: http://jsfiddle.net/6a5zT/