We Keep Coding

Knockout: how to validate object observale

I am binding to an observable object as follows:
<input data-bind="value: currentSelected().Title" type="text" placeholder="Title" class="form-control" autocomplete="off" />
I want the field on the object to be required and the save button below not to work unless the Title has been filled in:
<button class="btn btn-default" type="button" data-bind="click: saveBlogEntries">Save</button>
This is how I am setting currentSelected:
var newBlogEntry = new NewBlogEntry();
var newBlogEntryObservable = new NewBlogEntryObservable(newBlogEntry);
self.currentSelected(newBlogEntryObservable);
The definition for the function NewBlogEntry() is:
function NewBlogEntry()
{
return { "Id": 0, "Title": "", "Description": "", "Tags": [] };
}
What is the best way to disable the save button, or when clicked show a validation message next to the Title field?

You could use the knockout disable binding on your button:
<button class="btn btn-default" type="button" data-bind="disable: currentSelected().Title() == '', click: saveBlogEntries">Save</button>
To simplify the data-bind, you could have a computed observable for the empty title condition:
<button class="btn btn-default" type="button" data-bind="disable: currentSelected().HasNoTitle(), click: saveBlogEntries">Save</button>
HasNoTitle = ko.computed(function () { this.Title() == '' });
To get this binding to work, you would need the Title property to be observable.
Title = ko.observable('');

ng-model doesnt bind with text field

Consider the following JS
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
);
And the following HTML
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
My problem is that when the page loads, "test" is written in the text field, but when I change the field or press the button, nothing happens (console says "test" on every change or button click. Anyone know what I did wrong?

Try to wrap the value in an object. Objects are passed by reference, but simple values are passed as a copy of that value. It happened to me too several times.
Try this approach
$scope.myObject.searchBooking = "test"
So the full code will look like this
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.myObject.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.myObject.searchBooking);
//$location.path('/bookings/' + $scope.myObject.searchBooking);
//delete($scope.myObject.searchBooking);
}
$scope.printValue = function() {
console.log($scope.myObject.searchBooking);
}
}
);
and the html
<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">

Find this fiddle which is having ng-model binding in ng-change.
HTML
<div ng-controller="MyCtrl">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
Angular controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}

AngularJS can't pass $index from bootstrap modal window

I'm banging my head against the wall here. I'm using ng-repeat to populate a table. Inside each row i have 2 buttons, one for updating the row content and for uploading files. The upload button opens a bootstrap modal window, where the user selects the files and clicks on submit.
The submit button uses ng-click to run a function which uses $index as parameter. But the $index value is always the same no matter which row is selected.
The thing I don't understand is that I use the exact same syntax (although outside of a modal window) on my update button, which works just fine.
HTML:
<tr ng-repeat="item in items | filter:search " ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td>{{$index}}</td>
<td ng-hide="idHidden" ng-bind="item.Id"></td>
<td ng-hide="titleHidden">
<span data-ng-hide="editMode">{{item.Title}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="item.Title" data-ng-required />
<td>
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" data-toggle="modal" data-target="#uploadModal">Upload file <i class="fa fa-cloud-upload"></i></button>
<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" data-ng-hide="editMode" data-ng-click="editMode = true;" class="btn btn-default pull-right">Edit <i class="fa fa-pencil-square-o"></i></button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
</td>`
JS:
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
So the function uploadAttachment($index, type) which is triggered by ng-click doesn't pass the right index number. It always passes the same, no matter what row it is clicked in.
I have omitted some of the code that is irrelevant. If needed i can provide the whole thing.
Any suggestions to what I am missing?
Edit:
I have tried to implement DonJuwe suggestions.
I have added this inside my controller:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'www.test.xxx/App/uploadModal.html',
controller: 'riskListCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
This is my modal template:
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
And finally my function which resides inside RiskListCtrl (the only controller i use):
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
It seems that $scope.items[index].Id is empty. Error: Cannot read property 'Id' of undefined

The modal window has its own scope. That means you need to resolve data you want to pass into the modal's scope. To do so, use resolve within the modals open(options) method.
Before I will give you an example, I want to suggest having only one modal for all your table items. This will let you keep a single template where you can easily use id (now, you create a template for each of your table items which is not valid). Just call a controller function and pass your $index:
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" ng-click="openModal($index)">Upload file <i class="fa fa-cloud-upload"></i></button>
In your controller, create the modal instance and refer to the template:
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'myPath/myTemplate.html',
controller: 'MyModalCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
Now you can access index in your MyModalCtrl's scope by injecting index:
angular.module('myModule', []).controller('MyModalCtrl', function($scope, index) {
$scope.index = index;
});

Since, you are getting the index value outside model then you can also use ng-click and then call a function in your controller and store the index value in a temporary variable and then when you are using submit button then just take make another variable and assign the value of temporary variable to your variable. for example:
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
and then make a function in your controller
$scope.updateItem = functon(index)
{
$scope.tempVar = index;
}
now use the value of tempVar in you function
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var index = tempVar; //assign the value of tempvar to index
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}

update model value in AngularJS?

Here is a code snipped of view and controller. Here what I want just click on save button I mean
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" />
A request will be sent to server and when get success then tag must be hidden and tag will show but not working
HTML:
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="isEditabel == false" href="" ng-click="$parent.isEditabel = true"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}</p>
<div ng-show="isEditabel">
<textarea ng-model="latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting"></textarea>
<br /> <input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel">
</div>
In controller:
$scope.saveReleaseNotes = function(latestReleaseNotes,isEditabel) {
$scope.backgroundWorking = true;
$scope.saveButton = 'Updating...';
$http({
url: '/apps/'+$scope.app.id+'.json',
method: "PUT",
data: {
releaseNotes: latestReleaseNotes,
appBuildId:$scope.app.latestBuild.id
},
headers: {
'Content-Type': 'application/json'
}
}).success(function(data, status, headers, config) {
if (data.result == "success") {
flash.showSuccess(data.message);
$scope.isEditabel = false;
} else {
flash.showError(data.message);
$scope.latestReleaseNotes = $scope.app.latestBuild.releaseNotes;
}
$scope.backgroundWorking = false;
$scope.saveButton = 'Save';
}).error(function(data, status, headers, config) {
flash.showError("Error occued while updating release notes");
$scope.backgroundWorking = false;
$scope.saveButton = 'Save';
});
}
but model isEditable is not updated in view. I need hide <div> tag and show <p> tag on success.I'm trying by $scope.isEditabel = false; but it is not working.

I think your issue is you are toggling between using $parent.isEditable and isEditable. My first suggestion is to be consistent. Idealy isEditable is contained within the scope that you are using it. It seems a little odd to always be referencing "isEditable" of a parent.
If isEditable truly is contained within the parent you need to be careful about setting $scope.isEditable = true. You can end up redeclaring it on the child scope. I always suggest using functions like setIsEditable(true) and define that in the parent scope.
Trying to create a fiddle for you based on what you have given us.. but I think the below code would work.
//Parent scope
$scope.isEditabel = false;
$scope.setIsEditabel = function(value){
$scope.isEditabel = value;
}
<!-- updated html -->
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="$parent.isEditabel == false" href="" ng-click="$parent.setIsEditabel(true)"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!$parent.isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}
</p>
<div ng-show="$parent.isEditabel">
<textarea ng-model="latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting">
</textarea>
<br />
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,$parent.isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="$parent.isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel"/>
</div>
the better solution(always debatable)*:
I created a myModel this isn't necessary but it does clean things up a bit, esp. if you ever have to have multiple editable things on the same page.
We dont have to worry about passing around isEditable to the save, we shouldn't have to worry about apply. General suggestion is to make your html dumber..
//child scope
$scope.myModel = {
latestReleaseNotes: latestReleaseNotes,
isEditabel: false
}
$scope.saveReleaseNotes = function(){
//do save
//we have everything we need on $scope (myModel, isEdiabel, etc.)
}
<!-- updated html -->
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="myModel.isEditabel == false" href="" ng-click="myModel.isEditabel = true"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!myModel.isEditabel" class="form-control-static f-14">{{myModel.latestReleaseNotes}}
</p>
<div ng-show="myModel.isEditabel">
<textarea ng-model="myModel.latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting">
</textarea>
<br />
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="saveReleaseNotes(myModel);"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="myModel.isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel"/>
</div>

angularJS inline editor for multiple 'fields'

The following code-snippet enables me to edit the elements on a page, however, clicking on the P tags all the others change into inline-editor mode as well. How can I rework this script, such that it only enables the editor for the P tag clicked?
JS code:
function Profile($scope) {
$scope.person = {
name : "Test Name",
company : "Test",
role : "Test Role"
};
}
function Editor($scope) {
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
$scope.name = $scope.person.name;
$scope.company = $scope.person.company;
$scope.role = $scope.person.role;
},
$scope.disableEditor = function() {
$scope.editorEnabled = false;
},
$scope.save = function() {
$scope.person.name = $scope.name; //var = input.value
$scope.person.company = $scope.company;
$scope.person.role = $scope.role;
$scope.disableEditor();
}
}
HTML:
<div ng-controller="Profile">
<div ng-controller="Editor">
<h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="name" ng:required ng-model="name">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
<h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} # {{person.company}}</h5>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="role" ng:required ng-model="role"> # <input type="text" size="30" name="company" ng:required ng-model="company">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
</div>
</div>

The way I would most likely approach it would be to introduce new field into $scope that identifies which field is editable. Then your ngShow directive would contain an expression, something along these lines:
<span ng:show="editable == 'company'">
Your ngClick directive would look something like this:
<h1 ng:click="editor = 'company'">
Your cancel button would set this to null and your enable/disable editor functions would be gone. Bear in mind all this is top of my head, hopefully it points you in the right direction. I'll improve this answer if I get a chance.