Fatal编程技术网
  • javascript/
  • Javascript ui引导模式解析和范围值

Javascript ui引导模式解析和范围值

javascript angularjs

Javascript ui引导模式解析和范围值,javascript,angularjs,angular-ui-bootstrap,bootstrap-modal,Javascript,Angularjs,Angular Ui Bootstrap,Bootstrap Modal,我对angular比较陌生，我已经将引导模式集成到我的项目中，但我无法使用“programcontroller”中的值 我想要从“programcontroller”在“ModalInstanceCtrl”控制器内识别程序。我尝试将其添加到解析中，但无法获取数据 我在modal的ModalInstanceCtrl控制器中成功地通过解析从“programcontroller”获得了硬编码数据 但是由于我使用这个snipet获得了id\u程序： <input type="text" ng-hi

我对angular比较陌生，我已经将引导模式集成到我的项目中，但我无法使用“programcontroller”中的值

我想要从“programcontroller”在“ModalInstanceCtrl”控制器内识别程序。我尝试将其添加到解析中，但无法获取数据

我在modal的ModalInstanceCtrl控制器中成功地通过解析从“programcontroller”获得了硬编码数据

但是由于我使用这个snipet获得了id\u程序：

<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
下面给出了HTML代码

<!doctype html>
<html>
<head>
    <title>HBO ESP Console</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <script src="/controllers/programcontroller.js"></script>


</head>
<body style="background-color:#44484a">
    <h2>Program List</h2>

    <script type="text/ng-template" id="myModalContent.html">
        <body ng-controller="ModalInstanceCtrl">
            <div class="modal-header">
                <h3 class="modal-title">Program Version</h3>
            </div>
            <div class="modal-body" style="float:left">
                <ul ng-repeat="item in items" style="list-style-type:none">
                    <li class="image">
                        <button type="button" style="background-color: #555555" class="btn btn-default">
                            <img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
                        </button>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </body>
    </script>

    <div ng-controller="programcontroller">
        <input ng-hide=" true" type="text" ng-model="filter_program"><br><br>
        <p ng-hide=" true">Season_id: {{model.season_id}}</p>
        <p style="font-size:18px">Season Number:{{season_number}}</p>
        <div style="float:left">
            <div style="float:left">
                <ul ng-repeat=" item in program_array | filter : filter_program" style=" list-style-type:none;float:left">
                    <li class="image">
                        <input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
                        <input type="text" ng-hide=" true" ng-model="title_program" ng-init="title_program=item.title">
                        <button type="button" style="background-color: #555555" class="btn btn-default" ng-click="open('lg')">
                            <img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
                        </button>
                        <p>{{item.title}}</p>
                        {{id_program}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


HBO ESP控制台
节目表
程序版本

    

  • 

    • 


取消




季节标识：{{model.seasure\u id}

季节编号：{{季节编号}


    

  • 
{{item.title}
    
{{id_program}}

    •
请帮我对付这些家伙！！！！！！谢谢

从中删除ng controller=“ModalInstanceCtrl”
然后看看会发生什么。

您甚至在angular处理过滤器值之前就试图访问它

这是解决办法

<ul ng-repeat="it in itm">
<li>
  {{it._id}}
  <input type="text" ng-hide="true" >
  <button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button>
</li>
</ul>
}

这是你的电话号码

希望这有帮助

嗨，你能用你的代码添加到codepen或JSBin的链接吗？仍然不工作！！！所有的依赖项都是最新的，我想当我仔细检查的时候，不会被打扰。。。！！你能用你的代码创建一个plunkr或JSBin或Codepen吗？在上面的代码中，我需要ModalInstanceCtrl中ModalDemoCtrl的筛选值……你能帮我吗？你正在尝试在处理和设置值之前访问筛选值。并且尽可能避免JQuery的编程方式。这里有什么方法吗是解决方案看看这个小玩意儿，如果你需要任何解释，请告诉我。问题是id_程序是一个字符串，在ng repeat中绑定到多个输入。 
<script type="text/ng-template" id="myModalContent.html"> 

<ul ng-repeat="it in itm">
<li>
  {{it._id}}
  <input type="text" ng-hide="true" >
  <button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button>
</li>
</ul>

$scope.setFilter = function (filterValue) {
   $scope.filter = filterValue;