Tutorial by Examples

AngularJS code for dynamically showing/hiding an element: <p ng-show="SomeScopeProperty">This is conditionally shown.</p> KnockoutJS equivalent: <p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>

AngularJS code for rendering plain text: <p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p> KnockoutJS equivalent: <p> <!-- ko text: ScopeObservableX --><!-- /ko --> and <!-- ko text: ScopeObservableY --><!-- /ko --> </p> or: ...

AngularJS code for two-way binding on a text input: <input ng-model="ScopePropertyX" type="text" /> KnockoutJS equivalent: <input data-bind="textInput: ScopeObservableX" type="text" />

There is no direct equivalent binding in KnockoutJS. However, since hiding is just the opposite of showing, we can just invert the example for Knockout's ngShow equivalent. <p ng-hide="SomeScopeProperty">This is conditionally shown.</p> KnockoutJS equivalent: <p data-bi...

AngularJS code for dynamic classes: <p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p> KnockoutJS equivalent: <p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>