标签: angularjs-scope

我已经阅读了一篇关于使用范围的一些AngularJS陷阱的文章,并且它声明你不应该在表达式中使用函数,并且我理解每次框架认为需要时都可以评估表达式(这可能会发生很多)并且一遍又一遍地调用昂贵的功能是低效的.但是,如果该函数仅基于已经加载到范围中的值进行一些计算呢？例如,假设我有一个具有3个不同属性的范围,并且某些状态由这些属性值的组合决定.我可以在函数中计算该状态:

$scope.state = function() {
    return prop1 && prop2 && prop3;
};

并从表达式中调用该函数.另一种方法是每次更改每个属性时调用该函数,以便缓存状态值:

$scope.prop1 = someValue;
$scope.state = getState();
...
$scope.prop2 = someOtherValue;
$scope.state = getState();
...
$scope.prop3 = yetAnotherValue;
$scope.state = getState();

在这种情况下直接从表达式调用函数真的很糟糕吗？如果是这样,是唯一可以缓存计算值的替代方法,可能是在许多不同的地方,还是我还缺少另一种方法？

我有以下html:

<form ng-submit="addPath()">
                <input type="text" ng-model="newPathText"  style="width: 500px;" placeholder="Enter a local or network folder location (e.g., K:\documents\new-york)">
                <input class="btn-primary" type="submit" value="add" style="margin-bottom: 10px">
            </form>

和后面的js代码:

 $scope.addPath = function() {
        $scope.watchedFolders.push($scope.newPathText);
        apiService.addScanPath($scope.newPathText)
        $scope.newPathText= '';
    };

然而,当我调试它并调用addPath()时,我看到'$ scope.newPathText'总是变空('')...我在这里丢失了什么吗？

谢谢

<tr class="labels">
    <td nowrap="nowrap">Address</td>
    <td nowrap="nowrap"><label for="tbAddress"></label>
        <textarea name="tbAddress" id="tbAddress" cols="39" rows="5" ng-model="$parent.tbAddress"></textarea>

    </td>

</tr>
<tr>
    <td>&nbsp;</td>
    <td align="right">
        <input type="submit" name="button" id="button" value="Submit Record" class="btns" />
        <input type="reset" name="button2" id="button2" value="Cancel" class="btns" />
    </td>
</tr>

我无法textarea使用AngularJS 获得价值.所有input文本字段都通过控制器,除了textarea.我究竟做错了什么 ？

alert($scope.tbAddress);
var thisData = {
    'name': $scope.tbFN,
    'company': $scope.tbCompany,
    'designation': $scope.tbDesignation,
    'email': $scope.tbEmail,
    'phone': $scope.tbPhone,
    'mobile': $scope.tbMobile,
    'address': $scope.tbAddress
};

这是警报未定义......

我正在学习Angular,我正在尝试建立一些东西来学习.我试图在下面尽可能清楚地解释自己 - 任何帮助将不胜感激.

示例:http : //jsbin.com/micasafetise/2/ http://jsbin.com/micasafetise/2/edit?html,js,console,output

我创造了自己的这些数据

$scope.people = 
[
    {
    "personID": 1,
    "first_name": "Sam",
    "last_name": "Stimpson",
    "attending": false
    },
    {
    "personID": 2,
    "first_name": "Alison",
    "last_name": "van Schoor",
    "attending": true
    },
    {
    "personID": 3,
    "first_name": "Lindsay",
    "last_name": "van Schoor",
    "attending": false
    }
];

我在我的视图中创建了一个输出,如下所示:

<div ng-repeat="person in people">
  <a href="" ng-click="isAttending()">
    {{person.first_name}}{{person.last_name}} - {{person.attending}}
  </a>
</div>

现在我被困住了.我希望能够点击一个人并将他们的参加字段从false更新为true.我知道我可以像这样使用ng-click

$scope.isAttending = function() {
   alert("is attending");
};

但是没有线索如何更新我点击的人在$ scope.people中将false更改为true.

当我实现这一目标时,我计划再使用过滤器进行另一次ng-repeat来显示那些参加但我能够做到这一点的人.

任何人都可以帮助我或给我一些建议,任何事情都会在此刻受到赞赏.

提前致谢.

我写了一个我想在这里做的例子:http : //jsbin.com/micasafetise/2/ http://jsbin.com/micasafetise/2/edit?html,js,console,output

我在下面有这个控制器.在页面加载时,执行下面看到的$ http服务.

现在,我如何从其他控制器调用并执行控制器的$ http.post(...)部分AGAIN.

 controller: function ($scope, $element, $http) {

    function par() {               
        var xxx= null;
        xxx = $scope.$parent.$root.ParentItems['xxx'].xxx;
        var det = { xxx: xxx};              
        return det;
    }


 $http.post('/api/values/entries/GoHere', par()).success(function (salData) {

      var buildSHGraph = function (shData) {
        //code code codes...
      }

      $scope.Array1 = [];

      angular.forEach(salData, function (evt) {
         //Code Code Codes
      });

     buildSHGraph($scope.Array1);

 });

 }

我读自创AngularJS和具有怎样的一个体面的理解$scopes,$watch和$digest工作.我了解当你添加自己的$watches并且打电话给自己时它是如何工作的$digests.但是,我对于默认情况下究竟发生了什么感到困惑.

1. $scope.$$watchers默认添加什么？你穿的一切$scope？你指定的所有东西ng-model？都？别的什么？

2. 什么时候确实$digests被默认触发？输入字段更改？输入字段用ng-models？其他？

我试图用绑定变量调用控制器中定义的方法.

<img src="close.png" style="widht: 34px; height: 23px; cursor: pointer;"
                            data-ng-click="hideDtls({{one}} , {{two}})">

这里有一个和两个在我的控制器中定义,我可以在浏览器的开发工具中看到变量正在获取它们的值但是方法没有被调用.我必须将参数作为参数发送到方法.(我知道我可以直接访问它们,但这是由于实现).

 $scope.hideDtls(one , two)
   {
     // more logic here
   }

请告诉我,angularJs中不允许使用绑定变量调用方法吗？提前致谢

我目前正在使用角度ng-repeat.

当用户点击"下一步15"的按钮时,我想显示下15个项目.我不想从数组中弹出项目,我只想隐藏前15个,并将show限制为接下来的15个.

此外,当用户点击"上一页15"时,我只想显示前15个项目.

这是我到目前为止:

HTML:

<div ng-controller="ctrlIndex as vm">


    <ul ng-repeat=" item in vm.items | limitTo: 15 * vm.page
                                 | limitTo: 15 * vm.page < count ? limitTo: 15 * vm.page : 15 - (15 * vm.page - count)"/>
        <li>{{ item }}</li>
    </ul>
<div><button ng-click="vm.next()">Next 15</button></div>
<div><button ng-click="vm.back()">Prev 15</button></div>

使用Javascript:

 var app = angular.module('app', []);

 3app.controller('ctrlIndex', function(){

    var vm = this;
    vm.numRecords = 15;
    vm.page = 1;

    vm.items = []
    for (var i = 0; i < 1000000; ++i) { …

我有一个名为test的按钮和一个带有三个值的下拉菜单.如何根据下拉菜单中选择的值启用 - 禁用"测试"按钮.例如.如果选择"未就绪",则应禁用按钮如果选择就绪或注意,则应启用按钮

<div class="row">
    <div>
    <button id="testBtn" class="btn btn-default" >Test</button>
    </div>
</div>


<div class="row">
<div class="col-md-12">


    <select name="select">
        <option value="value1" selected>Not ready</option> 
        <option value="value2">Ready</option>
        <option value="value3">Attention !!</option>
    </select>


 </div>
</div>

见Plunker

https://plnkr.co/edit/RgGzgGkBPaxvKHNE688K?p=preview

在上面的示例中，我正在硬编码选择选项，并通过ng-init属性初始化为颜色“红色”。我想在页面加载时显示默认的颜色“红色”。

 <select ng-model="mycolor" ng-init="mycolor = 'red'">
      <option>red</option>
      <option>green</option>
    </select>

在控制器中，我将“ mycolor”更新为“绿色”，但由于ng-init属性，选择框仍显示“红色”。（我这样做是因为将从后端检索mycolor）

app.controller('MainCtrl', function($scope) {
  $scope.mycolor = 'green';
});

如何解决呢？简而言之，我想实现的是，我想在页面加载时的选择框中显示红色默认值，如果后端的mycolor发生任何更改，则应将其覆盖为新颜色。就我而言，它是绿色的。