0

I'm making a selectbox in AngularJS but got a problem while using it in angular routing. I don't know where to put this script code because if I put script tag in main html then routing not working and if I put script tag in correspond html file then drop-down not working.

This is my code:

from index.html

<
!DOCTYPE html >
<
html lang = "en-US" >
<
head >
<
script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" > < /script> <
   script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js" > < /script> <
link rel = "stylesheet"
 href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > < /script> <
      script src = "    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> <
style >
h1, h2, h3, h4, h5, h6 {
    color: #585858; }
</style>
</head>
 <body ng-app= "myApp" >
        <
        h3 class = "text-center main-heading" > Calculator < /h3> <
        div class = "col-sm-12" >
        <
        div class = "row" >
        <
        div class = "col-sm-3" >
        <
        table class = "table table-bordered table-hover text-center" >
        <
        tbody >
        <
        tr > < td > < a href = "#/" > Home < /a></td > < /tr> <
        tr > < td > < a href = "#painting" > painting < /a></td > < /tr> <
        tr > < td > < a href = "#plastering" > plastering < /a></td > < /tr> <
        /tbody> <
        /table> <
        /div> <
        div class = "col-sm-9" >
        <
        div ng - view > < /div> <
        /div> <
        /div> <
        /div> <
        script src = "route.js" > < /script> <
        /body> <
        /html> 

    and
    for other file where i want to use select box code is

    <
    div class = "col-sm-12"
    ng - controller = "myCtrl" >
    <
    img src = "painting.png"
    class = "img-responsive"
    style = "width:100%;" >
    <
    div class = "clearfix" >
    <
    /div> <
    div class = "col-sm-12 text-center" >
    <
    h3 > Select Material Type < /h3> <
    /div> <
    div class = "row" >
    <
    div class = "col-sm-4" >
    <
    div class = "form-group" >
    <
    label
    for = "sel1" > Select Material Unit < /label> <
    select class = "form-control"
    id = "sel1" >
    <
    option value = "u1" > Meter < /option> <
    option value = "u2" > Feet < /option> <
    /select> <
    /div> <
    /div> <
    div class = "col-sm-4" >
    <
    div class = "form-group" >
    <
    label
    for = "sel1" > Select Category < /label> <
    select ng - model = "selectedName"
    class = "form-control"
    ng - options = "x for x in names" > < /select> <
    /div> <
    /div> <
    div class = "col-sm-4" >
    <
    div class = "form-group" >
    <
    label
    for = "sel1" > Select Type Of Work < /label> <
    select class = "form-control" > < /select> <
    /div> <
    /div> <
    /div> <
    /div> <
    script >
    var select = angular.module('myApp', []);
    select.controller('myCtrl', function($scope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
    }); <
    /script>
J3STER
  • 1,027
  • 2
  • 11
  • 28
amit chauhan
  • 59
  • 5
  • Please edit your html properly – Pramod_Para Mar 22 '17 at 06:09
  • Possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, **`ng-view`**, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. – georgeawg Mar 22 '17 at 06:36
  • actually i am making a routing application, if i put these code together in single file that is index.html then its working but when i put calculator code and js in painting.htm which will be routing in index.html then it is not working. – amit chauhan Mar 22 '17 at 06:39
  • if you are using routing then you dont need to worry about different files, just use angular-ui-router to define states/controllers/templates – deepakchauhan Mar 22 '17 at 06:51

0 Answers0