Rectangle 27 4

You can use like this:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue@2.4.2"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>

<div id="vue-app">
  <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true">
    Click Me!
  </div>
  <hr>
  <input type="text" v-model="message"> {{ message }}

  <div id="popper-content" class="hide popper-content">
    <input type="text" v-model="message">
  </div>
</div>

</body>
</html>
new Vue({
  el:'#vue-app',
  data: {
    message: 'I am a Text!'
  }
})

$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popper-content')
  }).on('show.bs.popover', function() {
    $('#popper-content').addClass('show')
  }).on('hide.bs.popover', function() {
    $('#popper-content').addClass('hide')
  })
});

Nice one! Just a small recommendation that you can remove data-html="true" from the popover html, as in JS you are already specifying html:true .

You can remove html:true from js inside your code.

This is not the most elegant solution since you are mixing two libaries here (Vue and Jquery). Vue itself can handle this by itself with much less code (using v-if)

javascript - How to bind an input tag inside a popover to Vue Model - ...

javascript jquery twitter-bootstrap vue.js vuejs2
Rectangle 27 2

Vue cannot just know of html-element you dynamically create, hence your created input-element cannot be bound. If you really want to solve it this way, I think the render function can help you: https://vuejs.org/v2/guide/render-function.html

However, a more elegant solution (imho) is to create the basic Vue v-if function

<div id="vue-app">
    <div class="btn btn-primary" v-on:click="showPop = !showPop">Click Me!</div>
    <div class="mypopover" v-if="showPop">
        <p>Title</p>
        <input v-model="message">
     </div>
    <hr>
    <input v-model="message">
    {{ message }}
</div>
new Vue({   
    el:'#vue-app',
    data: {
        message: 'I am a Text',
        showPop: false
    }
 });

Just apply the bootstrap css class for styling

javascript - How to bind an input tag inside a popover to Vue Model - ...

javascript jquery twitter-bootstrap vue.js vuejs2
Rectangle 27 0

I was not passing the context to my nested view correctly (or at all). I should have bound the value attribute of my nested TextField view to the tags property of the current context (i.e., the current model) which happens to be the model that is given to us by App.ItemEditController, like so:

{{view view.autocompleteView valueBinding=this.tags}}

javascript - How to bind tagged input text field value to a model prop...

javascript ember.js ember-data
Rectangle 27 0

here's an interesting demo that uses custom directives that are a lot less intimidating than the ones you linked to. You should be able to apply them to your inputs without too much conflict with other stuff:

The trick is setting the parser and formatter for a model using the directive. This lets you intercept changes to the model and interact with the rest of your scope:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.date = new Date();
});

app.directive('datePartInput', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var part = attrs.part;
      var modelToUser, userToModel
      console.log('part:', part);
      if (part == 'year') {
        modelToUser = function(date) {
          return date.getFullYear();
        }
        userToModel = function(year) {
          ngModel.$modelValue.setYear(year);
          return ngModel.$modelValue
        }
      }
      else if (part == 'month') {
        modelToUser = function(date) {
          return date.getMonth();
        }
        userToModel = function(month) {
          ngModel.$modelValue.setMonth(month);
          return ngModel.$modelValue;
        }
      }
      else if (part == 'day') {
        modelToUser = function(date) {
          return date.getUTCDate();
        };
        userToModel = function(day) {
          ngModel.$modelValue.setUTCDate(day);
          return ngModel.$modelValue;
        };
      }
      ngModel.$formatters.push(modelToUser);
      ngModel.$parsers.push(userToModel);
    }
  }
})
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  {{date |  date}}
  <input date-part-input part="year" ng-model="date">
  <input date-part-input part="month" ng-model="date">
  <input date-part-input part="day" ng-model="date">
</body>

javascript - How to bind one model to multiple inputs with Angular JS ...

javascript angularjs angularjs-directive
Rectangle 27 0

You can create a re-usable directive that has the three fields in it so it can be used for all date fields. The model for the directive is aliased to date on the isolated scope. To get each of the date parts the date is then split and then year, month and day are assigned to scope properties. Then when one of the fields is changed the date property is updated by appending them together with the - separator.

For this directive I've just hard coded, years months and days. I'd recommend to use some javascript date functions to populate them so they aren't hard coded.

angular
.module('app')
.directive('dateSelect', function (){
    return {
        restrict: 'E',
        replace: true,
        scope: {
          date:'=ngModel'
        },
        template: '<div class="dateSelect"><div class="dateField"><selectize placeholder="Select a year..." config="yearConfig" ng-model="year" ng-change="dateChanged()"></selectize></div>' +
        '<div class="dateField"><selectize placeholder="Select a month..." config="monthConfig" ng-model="month" ng-change="dateChanged()"></selectize></div>' + 
        '<div class="dateField"><selectize placeholder="Select a day..." config="dayConfig" ng-model="day" ng-change="dateChanged()"></selectize></div></div>',
        controller: function ($scope) {
          $scope.yearConfig = {
          options: [{value: 2013, text: '2013'}, {value: 2014, text:'2014'}, {value: 2015, text:'2015'}],
          create: true,
          sortField: 'value',
          maxItems: 1,
        };
        $scope.monthConfig = {
          options: [{value: '01', text: '1'}, {value: '02', text: '2'}, {value: '03', text:'3'}, 
          {value: '04', text: '4'}, {value: '05', text:'5'}, {value: '06', text:'6'}, {value: '07', text: '7'}, {value: '08', text:'8'}, {value: '09', text:'9'},
          {value: '10', text: '10'}, {value: '11', text:'11'}, {value: '12', text:'12'}],
          create: true,
          sortField: 'value',
          maxItems: 1,
        };

        $scope.dayConfig = {
          options: [{value: '01', text: '1'}, {value: '02', text: '2'}, {value: '03', text:'3'}, 
          {value: '04', text: '4'}, {value: '05', text:'5'}, {value: '06', text:'6'}, {value: '07', text: '7'}, {value: '08', text:'8'}, {value: '09', text:'9'},
          {value: '10', text: '10'}, {value: '11', text:'11'}, {value: '12', text:'12'}],
          create: true,
          sortField: 'value',
          maxItems: 1,
        };

        $scope.dateChanged = function () {
          if (!angular.isUndefined($scope.year) && !angular.isUndefined($scope.month) && !angular.isUndefined($scope.day)) {
            $scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;
          }
        }

        if (!angular.isUndefined($scope.date)) {
          var dateParts = $scope.date.split("-");

          if (dateParts.length === 3) {
            $scope.year = dateParts[0];
            $scope.month = dateParts[1];
            $scope.day = dateParts[2];
          }
        }
      }
    };
});

That looks pretty doable! Would I need to inject the selectize dependency on for that to work? Or does that stay on the parent module?

No. You only need to add selectize to the module. If the directive is in the same module of your app then you are good to go.

javascript - How to bind one model to multiple inputs with Angular JS ...

javascript angularjs angularjs-directive
Rectangle 27 0

<p>{{message.text ? 'Hello, ' + message.text : message.text}}</p>
<p>{{message.text && 'Hello, '+message.text || message.text}}</p>

Update: You can use ngShow if you want to conditionally display an element:

<p><span ng-show="message.text != ''">Hello, </span>{{message.text}}</p>

thanks for the reply; can u plz explain why && and || are used; is there any link from where I can refer. message.text will display whatever the user types then after that will the && do?

can I use jquery for DOM manipulation with angularJS? like instead of ternary operator use the jquery hide, show method?

Ofcourse you can. But why to do that when there's a very simpler way of doing the same?

@ShivangSarawagi You might like using Angular's ngShow or ngHide directive.

javascript - Angular Js binding text input with model - Stack Overflow

javascript angularjs
Rectangle 27 0

You need to have 2 seperate text fields to bind first name and lastname. OR

You can use ng-click and add break the name into 2 parts and assign it to the scope variable

javascript - Bind two model names in one single input text box - Stack...

javascript angularjs angular-ngmodel
Rectangle 27 0

I found a useful Vue Package(vue-popper).

It do the same thing without using Bootstrap!

<popper trigger="click" :options="{placement: 'bottom'}">
  <div class="popper">
    <input type="text" v-model="message">
  </div>

  <div slot="reference" class="btn">
    Click Me!
  </div>  
</popper>

javascript - How to bind an input tag inside a popover to Vue Model - ...

javascript jquery twitter-bootstrap vue.js vuejs2
Rectangle 27 0

I think that a good way to do this is to have your view model be an array of steps and bind your UI to the "selectedStep". Then, each step can dynamically choose which template that it wants to use (like in this post).

This way the template bindings handles generating/binding/cleaning up the dynamic content based on whatever step is selected. If the steps are in an observableArray, then you could even dynamically add steps. Maybe you have a list of all of the possible steps and then have an "activeSteps" array that represents the steps that are currently valid based on the user's choices.

Thanks, Ryan. A very interesting and creative approach. As I'm fairly well into my development now I may try and get by with guarding uninitialized properties with "data-bind='if: xxx" statements which seems to be working for now. Your solution if far more elegant though! PS - Great fan of your blog (www.knockmeout.net). Keep up the fantastic work!

@RPNiemeyer I am using ASP.net MVC 4 and have a [Serializable] wizard that uses separate pages (from an MVC book) and is also using [DataAnnotations] with client-side validation. I'm wondering if your updated sample would work to replace the pages but continue using the validation. Any thoughts?

I'm implementing something similar, and one thing you can do instead of null checking data-bindings is just adding a binding for visible:. If it's a truthy value, like a string or object, the visible evaluates nulls and empty strings as false and hides the element. Would not recommend for numeric values, especially if you want it to display for zeroes.

KO 2.0+ no longer requires jQuery Templates to do templating. The samples in this answer were referencing KO 1.2.1. I updated both fiddles that I posted to reference KO 2.1 without jQuery Templates.

javascript - How to bind a Knockout js model to a wizard style UI - St...

javascript mvvm knockout.js wizard model-binding
Rectangle 27 0

The problem is that you have "true" and "false" in quotes, which makes them strings instead of booleans that Angular can bind the checkbox to.

If you just remove the quotes as follows, your code then works correctly. A working example is at http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW .

function ShoppingListCtrl($scope) {
    $scope.shoppingList = [
      {
      "text": "V8 fusion",
      "isGotten": true
      }, 
      {
      "text": "Whole milk container",
      "isGotten": false
      },
      {
      "text": "Protein bars",
      "isGotten": true
      }
   ];
};

javascript - How do I get checkboxes to bind to boolean values in my d...

javascript angularjs
Rectangle 27 0

A directive is probably best, but these examples look overly complex. Anyway if you are hoping to avoid a directive, just use $scope.$watch and re-build your date string each time one of the important variables are updated.

Something like this might be in your controller:

$scope.year = '';
$scope.month = '';
$scope.day = '';

// this might be able to be refactored
$scope.$watch('year', buildDate);
$scope.$watch('month', buildDate);
$scope.$watch('day', buildDate);

function buildDate() {
  $scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;
}

As a side note, this is probably what my directive logic would look like too.

Cleaner example - I prefer this because it groups all the date-related items with an object, which also makes watching for changes easier.

$scope.date = {
    year: '',
    month: '',
    day: ''
};

// use watch collection to watch properties on the main 'date' object
$scope.$watchCollection('date', buildDate);

function buildDate(date) {
  $scope.dateString = date.year + "-" + date.month + "-" + date.day;
}

To handle pre-existing values would you add another function like parseDate() to extract the parts of the date string and preset the values?

Sure, that sounds like a great option. At that point you might even consider creating a Date service to house all that similar logic.

javascript - How to bind one model to multiple inputs with Angular JS ...

javascript angularjs angularjs-directive
Rectangle 27 0

Hidden field does not support double binding.

<input type="hidden" name="userId" value="{{user.userId}}"/> {{user.userId}}
<input type="hidden" name="UserNameId" value="{{user.userNameId}}"/> {{user.userNameId}}
usersId
userNameId
record
SaveRecord(record)

does not work. why name attribute?

javascript - Bind hidden inputs to model in angular - Stack Overflow

javascript angularjs
Rectangle 27 0

You can use something like this:

<input type="hidden" ng-model="record.usersId" value="{{user.userId}}" ng-init="record.usersId=user.userId"/>

javascript - Bind hidden inputs to model in angular - Stack Overflow

javascript angularjs
Rectangle 27 0

Add a data structure to your controller that contains the relevant informations:

$scope.showImage=[];
$scope.showImage.Link='http://i.imgur.com/9VFmFrN.jpg';
$scope.showImage.Source='http://i.imgur.com/9VFmFrN.jpg';     
$scope.showImage.Title='Personalized Title';

The access it in your html as if you are using a template engine:

<div>
  <a class='fancybox' ng-href='{{showImage.Link}}' data-fancybox-group='gallery' title='{{showImage.Title}}'><img class='MaxUploadedSmallSized' ng-src='{{showImage.Source}}' alt=''></a>
</div>

javascript - Image is not rendering as text, when I bind it with angul...

javascript jquery angularjs
Rectangle 27 0

You are sharing same observable($root.selectedId) instead of this every catalog should have there own copy of selectedId. for that you can use constructor function eg,

function Catalog(serviceTypes, d) {
   this.catalog = serviceTypes;
   this.selectedId = ko.observable(d || null);
   this.selectedId.subscribe(function (item) {
     //Subscriber Handler
   });
}
var initialData = [{
  firstName: "John",
  lastName: "Carter",
  services: [new Catalog(serviceTypes, 1), new Catalog(serviceTypes, 2)]
}];

addContact and addService function are also changed.

self.addContact = function () {
    self.contacts.push({
        firstName: "",
        lastName: "",
        services: ko.observableArray([new Catalog(serviceTypes)])
    });
 };

 self.addService = function (contact) {
    contact.services.push(new Catalog(serviceTypes));
 };

Thanks for the answer Akhlesh, can you help with computing the total price for each contact and sum of all this totals? for example: Firtname: John, Lastname: Carter, Total Debt: 10 USD (sum price of services)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - knockout - how to subscribe for multiple dropdown menus (...

javascript html knockout.js drop-down-menu knockout-3.0
Rectangle 27 0

you can use the datepicker directive in angular-ui project

javascript - How can I bind bootstrap date time picker values to an an...

javascript angularjs
Rectangle 27 0

<div ng-app="app" ng-controller="Ctrl as ctrl">
    <form name="theform">
        <range ng-model="ctrl.theRange" name="myRange" required="true"></range>
    </form>
    <button ng-click="ctrl.theRange = '10/100'">SET</button>
</div>
var app = angular.module("app",[]);

app.controller("Ctrl", function($scope) {
    this.theRange = "1/7";
});

app.directive("range", function() {
    var ID=0;

    function constructRangeString(from, to) {
        var result;
        if( !from && !to ) {
            result = null;
        }
        else if( from ) {
            result = from + "/" + (to || "");
        }
        else if( to ) {
            result = "/" + to;
        }
        return result;
    }

    return {
        require: "ngModel",
        restrict: "E",
        replace: true,
        scope: {
            name: "@"
        },
        template:
            '<div ng-form="{{ subFormName }}">' +
                '<input type="text" ng-model="from" class="range-from" />' +
                '<input type="text" ng-model="to" class="range-to" />' +
            '</div>',
        link: function(scope,elem,attrs,ngModel) {
            var re = /([0-9]+)\/([0-9]+)/;

            if( scope.name ) {
                scope.subFormName = scope.name;
            }
            else {
                scope.subFormName = "_range" + ID;
                ID++;
            }

            ngModel.$render = function() {
                var result, from, to;
                result = re.exec(ngModel.$viewValue);
                if( result ) {
                    from = parseInt(result[1]);
                    to = parseInt(result[2]);
                }
                scope.from = from;
                scope.to = to;
            };

            scope.$watch("from", function(newval) {
                var result = constructRangeString(newval, scope.to);
                ngModel.$setViewValue(result);
            });
            scope.$watch("to", function(newval) {
                var result = constructRangeString(scope.from, newval);
                ngModel.$setViewValue(result);
            });
        }
    };
});

javascript - How can i bind model in angular directive - Stack Overflo...

javascript angularjs angular-ui-typeahead
Rectangle 27 0

This would be a good time to use ngModelCtrl.$parsers instead of binding to keypresses manually. Try something like this in your link function:

ngModelCtrl.$parsers.push( function (value) {
    // do some validation logic...it fails
    if (validationFails) {
        var prevValue = ctrl.$modelValue;
        ctrl.$setViewValue(prevValue); // set view
        ctrl.$render(); // render view
        return prevValue; // set model
    }

    // otherwise we're good!
    return value;
} );

Here is a Plunker which demonstrates. The input field will reject a lowercase z from being entered.

Thanks for your reply. I gave this a try but it doesn't revert back to the old value when I return false.

Ah yes sorry $validators is to modify the validity of the form input, I'll modify the answer to use $parsers.

Gave this a try, I am able to maintain the correct "prevValue" but it still shows the bad value in the UI. Can I prevent the model update from this function?

As I read the docs more, maybe you need to call ngModelCtrl.$setViewValue(prevValue) in the validationFails block before returning prevValue. I might set up a plunkr to test this.

javascript - Using an AngularJS directive, how do I bind to keyup even...

javascript angularjs
Rectangle 27 0

I think the problem is that you are assigning the scope list to the service instance instead of the method result.

angular.module('3pix').controller('ListController', ['$scope', 'jquery', 'list',
    function ($scope, $, list) {
        $scope.list = list.loadItems()
}]);

Also can you try this in html

ng-repeat="item in list"

list also contains other properties that I need in my views. In my question I reduced the class to what necessary.

You can still use the list service variable. The list service you have defined does not contain any items property that you are binding to. So you either bind the promise or you bind the return value retrieved using then method on promise.

I prefer not to add a property on the controller because I already have this property in the List service. More then that, List has other methods that add items. Is there any other way to do it?

I am not talking about adding any property on controller but the sevice you have injected does not have a property items which you are trying to bind in the view

The service does have the property items: List.items holds the items.

javascript - angular js model doesn't bind - Stack Overflow

javascript angularjs
Rectangle 27 0

$scope.data.Filters.push($scope.data1);

data1 also lies in the scope of the controller.

javascript - Complex model binding in Angular JS - Stack Overflow

javascript angularjs model