I am using this plunker:
http://plnkr.co/edit/q7x2iz8tnnEC2mnsvLAK?p=preview
it's working fine
<tr ng-repeat="data in Value" >
<td>
<span ng-show="!data.edit">{{data.question}}</span>
<input ng-show="data.edit" type="text" ng-model="data.question" class="form-control" placeholder="Name"/>
</td>
<td>{{data.name}}</td>
<td><button id="{{data.id}}" ng-click="editUtterance(data)" class="glyphicon glyphicon-pencil edit">Edit</button></td>
<td><button id="{{data.id}}" ng-click="save(data)" class="glyphicon glyphicon-pencil edit">Save</button></td>
</tr>
But my problem is If i click edit textbox enable that's fine if i click save then only that txtbox hided
How to disable that?
angularjs Disable textbox other while click on another row textbox
How to fix it this ?
You need to keep the track of all buttons you have clicked and store them in a stack. Every time you edit a new input filed, you need to add the index of it to the stack. Once you save it (only the top one on the stack can be saved), you need to pop (remove) it from the stack (last element). This will jump to the next input field that needed to be edited. And so on, until your stack becomes empty.
// Instantiate the app, the 'myApp' parameter must
// match what is in ng-app
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.Value = [{
id: 1,
question: 'question 1',
name: 'name 1'
}, {
id: 2,
question: 'question 2',
name: 'name 2'
}, {
id: 3,
question: 'question 3',
name: 'name 3'
}]
$scope.selected = []; // initialise the array / stack
$scope.editUtterance = function(data, index) {
//alert(data.id);
data.edit = true;
//console.log(data.edit);
$scope.selected.push(index); // add to the stack
}
$scope.save = function(data) {
data.edit = false;
if ($scope.selected) {
$scope.selected.pop(); // remove last element from the stack
}
}
});
<head>
<script data-require="angular.js#1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
</head>
<body ng-controller="MyCtrl" ng-app="myApp">
<span ng-show="!edit">{{data.question}}</span>
<table>
<thead>
<tr>col 1</tr>
</thead>
<tbody>
<tr ng-repeat="data in Value">
<td>
<span ng-show="!data.edit">{{data.question}}</span>
<input ng-show="data.edit" ng-disabled="selected[selected.length-1] != $index" type="text" ng-model="data.question" class="form-control" placeholder="Name" />
</td>
<td>{{data.name}}</td>
<td><button id="{{data.id}}" ng-click="editUtterance(data,$index)" class="glyphicon glyphicon-pencil edit">Edit</button></td>
<td><button id="{{data.id}}" ng-disabled="selected[selected.length-1] != $index" ng-click="save(data)" class="glyphicon glyphicon-pencil edit">Save</button></td>
</tr>
</tbody>
</table>
Previously selected: {{selected}}
<script>
</script>
</body>
Related
I'm generating a table of values using ng-repeat and have a text box I'm using to filter that list. That's working fine.
I also have a small "x" image after the text box where the user can click to remove the text they typed for filtering. When they click the "x", I want to clear the text box and restore the full list of items, unfiltered. Clicking the "x" clears the text box, but the list then disappears completely, rather than being restored to its full, unfiltered state. What's the trick? Here's my code:
<table id="tblGroups">
<tr>
<td>
<input ng-model="f.Name" />
<img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" ng-click="f.Name = null" />
</td>
</tr>
<tr ng-repeat="g in groups | filter:f">
<td>
<label><input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
</td>
</tr>
</table>
Instead of setting f.name to null set it to a blank string like so.
Before:
<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
ng-click="f.Name = null" /></a>
After:
<a href=""><img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete"
ng-click="f.Name = ''" /></a>
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.groups = [{
Name: 1
}, {
Name: 2
}, {
Name: 3
}, {
Name: 4
}, {
Name: 5
}, {
Name: 6
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<table id="tblGroups">
<tr>
<td>
<input ng-model="f.Name" />
<img class="DeleteSavedSearchIcon" src="Content/assets/DeleteIconSmall.png" alt="delete" ng-click="f.Name = ''" />
</td>
</tr>
<tr ng-repeat="g in groups | filter:f">
<td>
<label>
<input type="checkbox" id="{{g.Name}}" ng-click="onClickSearchCriteriaCheckbox()" ng-model="selected[m.Name]" />{{g.Name}}</label>
</td>
</tr>
</table>
</div>
Try
ng-click="f.Name = undefined"
see example in plunker https://plnkr.co/edit/TpESoPYENhYQoWuNrIFT?p=preview
This is my code structure.Here I have multiple roles and region text boxes accordingly.Now if I entered wrong value then how can I clear that particular text box?
<tbody>
<tr ng-repeat="od in default_role">
<td>{{od.role}}</td>
<td>
<datalist id="all_region_list"> <option data-ng-repeat="or in list_region" value="{{or}}"> </datalist>
<input class="form-control" type="text" data-ng-model="region" list="all_region_list" placeholder="Region" title="Region" ng-keyup='get_region_values("Region");' ng-blur='location_value_check("Region",region,$index)'>
</td>
</tr>
</tbody>
You need to set the model's property (which is connected to the particular textbox) value to ''. So it will clear the textbox.
Demo:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button ng-click="item.name = ''">Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
If you want to just clear the textbox without changing the model:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
angular.element(document).ready(function() {
$('button').click(function() {
$(this).parents('tr').first().find('input').val('');
});
});
});
<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.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button>Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
I have the following table. The button "Rename 2" in the row with the value displayed works okey. But how to get the "Rename 1" work?
<table ng-app="app" ng-controller="ctrl" border="1">
<tr>
<td ng-repeat="v in vendors">
<button ng-click="vendorForm.$show()" ng-hide="vendorForm.$visible">Rename 1</button>
</td>
</tr>
<tr>
<td ng-repeat="v in vendors">
<span editable-text="v.name" e-form="vendorForm">{{v.name}}</span>
<button ng-click="vendorForm.$show()" ng-hide="vendorForm.$visible">Rename 2</button>
</td>
</tr>
</table>
Controller:
var app = angular.module('app', ['xeditable']);
app.controller('ctrl', function($scope) {
$scope.vendors = {
1: { name: "first" },
2: { name: "second" },
3: { name: "third" }
}
});
jsFiddle
Selected value from the drop down should be added when I click on add button, only once the value should be added to the result field. Some once can help me on this. below is code which i tried.
function ContactController($scope) {
$scope.contacts = ["Apple"];
$scope.curItem = [{
id: "1",
items: "Apple"
}, {
id: "2",
items: "Orange"
}, {
id: "3",
items: "Banana"
}, {
id: "4",
items: "Apricot"
}, {
id: "5",
items: "Asparagus"
}, ];
$scope.selectedItem = $scope.curItem[0];
}
View :
<table class="range-table" width="100%">
<tr>
<td>
<input type="hidden">
<button class="btn btn-link" value= "Save">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
<td>
<select required="" style="min-width:180px;"> </select>
</td>
</tr>
</table>
<table class="range-table" width="100%">
<tr>
<td ng-repeat="contact in contacts"> <td>{{ contact }}</td>
</tr>
</table>
HTML:
<body ng-controller="MainCtrl">
<table class="range-table" width="100%">
<tr>
<td><input type="hidden"> <button class="btn btn-link" ng-click="save(selectedItem)">Save</button> </td>
<td><select ng-model="selectedItem" ng-options="i.items as i.items for i in curItem" ng-init="selectedItem=curItem[0].id"></select></td> </tr>
</table>
<table class="range-table" width="100%">
<tr>
<tr ng-repeat="contact in contacts track by $index">
<td>{{ contact }}</td>
</tr>
</table>
</body>
Javascript (your controller code):
app.controller('MainCtrl', function($scope) {
$scope.contacts = ["Apple"];
$scope.curItem=[{id:"1",items:"Apple"}, {id:"2",items:"Orange"}, {id:"3",items:"Banana"}, {id:"4",items:"Apricot"}, {id:"5",items:"Asparagus"}];
$scope.save=function(i){
if ($scope.contacts.indexOf(i) <= -1){
$scope.contacts.push(i);
}
};
});
Here is the working Plunker
Edit: It seems that you want to add value only once. I've edited my answer and plunker.
I have created a plunker
Textbox should be enabled on click of other option radio button is checked
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch('form.Program', function(mVal){
if (angular.isUndefined($scope.form)) return;
if(mVal === 'other'){
$scope.form.OtherProgram = $scope.tmVar;
} else {
if($scope.form.OtherProgram !== null){
$scope.tmVar = $scope.form.OtherProgram;
$scope.form.OtherProgram = null;
}
}
});
});
HTML:
<body ng-controller="MainCtrl">
<p>
Program:
<label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label>
<input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" ng-required ="form.Program != 'other'"/>
</p>
</body>
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);