We Keep Coding

Multiple select with one more value associated with it in angular js

I'm planning to add multiple select field into my project but the problem is I want to capture one more integer value along with every selected value,Can anyone suggest me best way of selecting the value along with multiple select. My multiple select dropdown look like this.. and thanks in advance
<div class=" multiselectdd "><multiselect ng-model="vm.inventory.SiteId" options="site.value as site.label for site in vm.sites" data-header-key="header"data-divider-key="divider" scroll-after-rows="5"filter-after-rows="0">
</div>

I don't get it properly but if you want to select more than one object in your select list you can:
Javascript Side
$scope.SelectedChanged = function (yourModel) {
if (yourModel.length > 1) {
$scope.newModel = yourModel[1];
}
};
HTML Side
<select name="yourElementName" multiple ng-model="yourModel" ng-change="SelectedChanged(yourModel)">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Tree</option>
<option value="3">Four</option>
</select>
and call your model to test
<span>{{yourModel}} - Second Value: {{newModel}} </span>
When you select multiple element lets say " One and Two " you will see like:
Output
["0","1"] - Second Value: 1

How use Select Option in Watson Conversation

I'm trying to insert the select options tag into my conversation, to make it more simple to the user. I did this:
And in the index.js:
function selected(){
switch($('#selected option:selected').val()){
case 01:
alert("01");
break;
case 02:
alert("02");
break;
}
};
But it doesn't recognize the option selected. I tried without the function selected() (only with switch case), but it didn't worked.. Can somebody help me please? Thanks a lot!

I believe your HTML inside the Advanced context have something you miss.
In your HTML in onselect your typed :, but, for use onselect and call one function you have to use onselect="nameFnction()"
See one simple example inside MDN to use this tag:
<input type="text" onselect="myFunction()" value="Hello world!">
Now, see other example for works fine according the choice:
<select>
<option onclick="doSomethingA(this);">A</option>
<option onclick="doSomethingB(this);">B</option>
<option onclick="doSomethingC(this);">C</option>
</select>
And with jQuery (Your id is select and not selected):
$('#select option:selected').val()

How to get the innerText of selected option with jQuery from angular outerHtml?

Brief:
I'm working on a printing directive for angularJs.
Some libraries (handsontable, custom-scoller, etc..) made me to create my own logic instead of using the default printing of the browser.
I find out that the best option is to get the outerHtml of the page and then parse it with jQuery and convert some grids into tables and scrollers into expandable divs. However, everything works perfectly except selects element.
For inputs for example it is very simple, You just ask jQuery to give you the value, but for selects you can't ask for the selected option and get its innerText.
The Question:
How can I fetch from select element that created by ng-options and get the selected option innerText by outerHtml?
For inputs, it's pretty easy just ask for $(input).val()
But for select you can't ask
for $(select :selected)
because it'll gives you wrong selected option and that's because how angularJs works with selects and objects.
Extra Information:
If you'll look on the generated html code by angularJs ng-options it'll look like that:
<select ng-model="type" ng-options="item.value as item.text for item in list" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="number:1" label="Prices" selected="selected">Prices</option>
<option value="number:2" label="Gifts">Gifts</option>
<option value="number:3" label="Total">Total</option>
</select>
As you can see, on the Screen the selected option is Gifts, but on the html code actually the Prices is the one that selected.
So that's why I can't use jquery to get the selected option innerText.
AngularJs doesn't update the html dom of the selected element and causing it to be impossible to get its values with the html source only.
I created a demonstration of the situation on jsFiddle.
Just play with the selectBox, click on getOuterHtml button and see that nothing got change.
Any suggestions?

You can use the value to select the option, then get its html: http://jsfiddle.net/bb23u1vy/1/
var val = clone.find('select').val();
$scope.html = clone.find('select option[value="' + val + '"]').html();

You don't need to assign 1st element of the list to $scope.type. And you can directly fetch selected element from $scope.type.
I have created JSFiddle to demonstrate the same.
<div ng-controller="MyCtrl">
<select ng-model="type" ng-options="item.value as item.text for item in list"></select>
<button ng-click=getHtml()>
Get OuterHtml()
</button>
<code>
{{html}}
</code>
</div>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
AND
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.list = [
{value: 'Prices', text: 'Prices'},
{value: 'Gifts', text: 'Gifts'},
{value: 'Total', text: 'Total'}
];
$scope.getHtml = function(){
$scope.html = $scope.type;
};
}]);
Hope this helps you.

I found what caused the situation. It was the clone.
Just had to get all the data before I clonning and it works.

custom tag containing data in option

I am having a list of stuff that the user can select. The way it's currently made, we have an integer as name, a price as value but i need to add a color. It's not unique so i cannot use ID.
example :
<option name='6' value="30.95">6 Orange(30.95$/month)</option>
<option name='6' value="33.95">6 Green(33.95$/month)</option>
<option name='10' value="32.95">10 Orange(32.95$/month)</option>
<option name='10' value="35.95">10 Green(35.95$/month)</option>
I need to combine two non-unique values and them to be accessible by jQuery / Javascript
I would like not to make two selects. I know it's straightforward the easiest solution but if i could stick to a single one that would give better results.
Is it safe to create a custom tag like "prodcolor" with any non-reserved nametag or is there a smarter way to achieve this?
Many thanks once again.

You can use HTML5 data- attributes, which is invented for this very purpose. More importantly, the values of the data- attributes can be accessed using JS.
Since you want to include colour, you can use the data-colour attribute, for example:
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Even better: Actually, you shouldn't even use the name attribute to store your quantity. Why not use data-quantity instead? :)
<option data-quantity="6" value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option data-quantity="6" value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option data-quantity="10" value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option data-quantity="10" value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Some background:
There's a nice guide published by Mozilla on how to use JS to access such attributes. Note that it is recommended to use dash (-) separated attributes, instead of any other naming convention, e.g. data-product-name instead of data-productName. This is because the .dataset method in JS converts dash-separated data attributes into camelCase. So data-product-name will be accessible via .dataset.productName, for example.
jQuery also allows you to access the values of data- attributes via the .attr() or .data() methods. The only difference is that:
.attr() is not cached, so you can use it to access dynamically-modified data- attributes, while .data only reads data attributes at runtime.
.attr() can be used to read and write data attributes, but .data() can only be used to read data attributes from the DOM. .data() is also used to access the jQuery data object that is not written to the DOM.
Usage example:
Using your code above, we can create a simple example of alerting the colour of the product upon the firing of the change event:
$(function() {
$('select').change(function() {
var $choice = $(this).find('option:selected')
alert('Colour: ' + $choice.attr('data-colour') + '\n' + 'Price: $' + $choice.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
</select>

Angular binding not working in Chrome/Opera

Hi this JSFiddle works in Internet Explorer and Firefox but no other browxsers work. The idea of the code is a currency converter that is up to date using the Yahoo Currency API. It doesn't update the $scope on the other browsers the way it is supposed to on Chrome. http://jsfiddle.net/xHmLT/13/
choose a post ({{visible.post}} is visible)
<select>
<option ng-repeat="shot in shots" ng-click="visible.post = shot.Name" value="{{shot.Name}}">{{shot.Name}}</option>
</select>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate | currency:'':''}}
</div>
<div ng-repeat="shot in shots" ng-if="visible.post == shot.Name">{{shot.Rate *5 | currency:'':''}}
</div>

I updated your fiddle and is working as you'd intended...
Your select is now populated via ng-options and the model is visible.post (as an object). As a result anywhere showing visible.post, is now showing visible.post.Name (field on the object)
<select ng-options="s.Name for s in shots" ng-model="visible.post"></select>
The initialization of the selected value is done in the success promise handler:
$scope.visible.post = $scope.shots[0];