AngularJS指令與模板中的選擇和ng選項

是否有可能創造呈現不同的時間指令（00：15,00：30,00：45）等進入其中，我ngModel小時使用對象和分像下面一個選擇框？

{ 
    "h" : 1, 
    "m" : 30 
}

我的想法是使用ngModel。$格式化，ngModel。$解析器和ngModel。$渲染，使其能夠有選擇框的文字表述和ngModel之間的雙向綁定。

見的jsfiddle http://jsfiddle.net/52kUy/23/

我一直在玩一個解決的NG-改變連接到選擇框，但我還需要NG-變化在應用中反應時間的變化可用。

注意：爲簡化我已刪除字符串的填充用代碼（00:15 => 0:15等）。

任何方向超級感謝。

來源

2014-11-20 Niclas

這是你的意思？

HTML：

<div ng-app="HelloApp" ng-controller="HelloController"> 
    <select ng-model="blah" ng-options="value as value | myfilter for value in values"></select> 
    {{blah}} 
</div>

JS：

app.filter('myfilter', function() { 
    return function(obj) { 
     return obj.h + ':' + obj.m; 
    } 
}); 
app.controller('HelloController', function($scope) { 
    $scope.values = [{ 
     "h" : 1, 
     "m" : 30 
    }, { 
     "h" : 1, 
     "m" : 25 
    }];

jsfiddle

編輯：

回答你的問題，如果你想初始化一個選擇的模型和模型比較將通過參考完成;看看這個：angular docs，特別這一行：「注意：。ngModel比較由參考，不值綁定到對象的數組時，這是重要的參見本的jsfiddle示例」除非您表達式中定義的軌道，你的情況，我們可以做這樣的事情：

HTML：

<div ng-app="HelloApp" ng-controller="HelloController"> 
    <select ng-model="blah" ng-options="value as value | myfilter for value in values track by value.h + ":" + value.m"></select> 
    {{blah}} 
</div>

JS：

app.filter('myfilter', function() { 
    return function(obj) { 
     return obj.h + ':' + obj.m; 
    } 
}); 
app.controller('HelloController', function($scope) { 
    $scope.values = [{ 
     "h" : 1, 
     "m" : 30 
    }, { 
     "h" : 1, 
     "m" : 25 
    }]; 


    $scope.blah = {h: 1, m: 25}; 
});

plunker

來源

2014-11-20 22:57:55 Wawy

感謝使用過濾器的頂端！更新小提琴http://jsfiddle.net/niclas_lindberg/37dqrb08/2/來嘗試它。但是，當我使用數組中存在時間的對象定義$ scope.blah時，select並沒有使用正確的值進行初始化。如果我創建一個由數組引用的值對象並在$ scope.blah中設置，它就可以工作。（引用）。有任何想法嗎？ – Niclas 2014-11-21 09:09:05

檢查我的編輯:) – Wawy 2014-11-21 09:26:26

正確。我做了同樣的發現。下面的例子。接受的答案。 :) – Niclas 2014-11-23 14:45:51

吳選項由工作所以通過進一步擴展Wawy的解決方案，通過ng-options跟蹤它的價值。

HTML：

<div ng-app="TestApp" ng-controller="HelloController"> 
    <select ng-model="blah" ng-options="value as value | myfilter for value in values track by id(value)"> </select> 
    {{blah}} 
</div>

JS：

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

app.filter('myfilter', function() { 
    return function(obj) { 
     return obj.h + ':' + obj.m; 
    } 
}); 

app.controller('TestController', function($scope) { 

    $scope.id = function(obj) { 
     return obj.h + ":" + obj.m; 
    }; 

    $scope.values = [{ 
     "h" : 1, 
     "m" : 30 
    }, 
    { 
     "h" : 1, 
     "m" : 25 
    }]; 

    $scope.blah = {"h":1,"m":25}; 

});

來源

2014-11-21 09:22:22 Niclas

AngularJS指令與模板中的選擇和ng選項

回答

相關問題